# anytify官网

**Repository Path**: uf_lee/anytify

## Basic Information

- **Project Name**: anytify官网
- **Description**: anytify官网
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-14
- **Last Updated**: 2025-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Anytify 官网项目

这是 Anytify 官网项目的前端代码库，采用响应式设计，适配手机、平板和 PC 端。

## 样式结构

项目使用了模块化的样式结构，主要包含以下文件：

### 1. 样式文件结构

```
src/
└── styles/
    ├── index.scss      # 主样式文件，导入所有其他样式
    ├── reset.css       # 重置默认样式
    ├── variables.scss  # 公共变量（颜色、字体、间距等）
    └── common.scss     # 公共样式和工具类
```

### 2. 变量文件 (variables.scss)

包含所有全局变量，如：

- 颜色变量
- 字体变量
- 间距变量
- 断点变量（用于媒体查询）
- 容器宽度
- 边框圆角
- 阴影
- 过渡动画
- z-index 层级管理

### 3. 公共样式 (common.scss)

包含常用的工具类和组件样式，如：

- 容器样式
- 弹性布局工具类
- 间距工具类
- 文本样式
- 按钮样式
- 卡片样式
- 响应式工具类

### 4. 重置样式 (reset.css)

重置浏览器默认样式，确保在不同浏览器中有一致的基础样式。

## 响应式设计

项目使用媒体查询实现响应式设计，主要断点如下：

```scss
$breakpoint-mobile: 576px; // 移动端
$breakpoint-tablet: 768px; // 平板
$breakpoint-desktop: 992px; // 桌面
$breakpoint-large-desktop: 1200px; // 大屏桌面
```

## 如何使用

### 1. 在组件中引入样式

在组件中可以直接引入主样式文件：

```jsx
import "../../styles/index.scss";
```

或者创建组件特定的样式文件，并在其中引入变量：

```scss
// 组件样式文件
@import "../../styles/variables.scss";

.my-component {
  color: $primary-color;

  @media (max-width: $breakpoint-tablet) {
    // 平板及以下设备的样式
  }

  @media (max-width: $breakpoint-mobile) {
    // 移动端的样式
  }
}
```

### 2. 使用工具类

HTML/JSX 中可以直接使用预定义的工具类：

```jsx
<div className="container">
  <div className="flex justify-between align-center">
    <div className="card">
      <h2 className="text-primary mb-md">标题</h2>
      <p className="mb-lg">内容</p>
      <button className="btn btn-primary">按钮</button>
    </div>
  </div>
</div>
```

### 3. 响应式隐藏/显示

使用预定义的响应式工具类控制元素在不同设备上的显示和隐藏：

```jsx
<div className="hidden-mobile">仅在平板和桌面显示</div>
<div className="hidden-desktop">仅在平板和移动端显示</div>
<div className="visible-mobile">仅在移动端显示</div>
```

## 开发指南

1. 尽量使用变量文件中定义的变量，而不是硬编码值
2. 使用预定义的工具类来减少重复代码
3. 使用媒体查询实现响应式设计
4. 遵循移动优先的设计原则

## 安装依赖

确保安装了 SASS 预处理器：

```bash
npm install sass --save-dev
```

或

```bash
yarn add sass --dev
```