# 响应式断点规范

## 标准断点（参考 Bootstrap / Ant Design）

| 断点名称 | 缩写 | 范围 | 目标设备 |
|:---------|:----|:-----|:---------|
| **XS** | `<576px` | 0–575px | 小屏手机 |
| **SM** | `≥576px` | 576–767px | 大屏手机 |
| **MD** | `≥768px` | 768–991px | 平板竖屏 |
| **LG** | `≥992px` | 992–1199px | 平板横屏/小桌面 |
| **XL** | `≥1200px` | 1200–1599px | 标准桌面 |
| **XXL** | `≥1600px` | 1600+px | 大屏桌面 |

## CSS Media Query 模板

```scss
// XS: <576px（默认样式，不需要 media query）
// SM: ≥576px
@media (min-width: 576px) { }
// MD: ≥768px
@media (min-width: 768px) { }
// LG: ≥992px
@media (min-width: 992px) { }
// XL: ≥1200px
@media (min-width: 1200px) { }
// XXL: ≥1600px
@media (min-width: 1600px) { }
```

## 断点设计策略

### 移动优先（Mobile First）
1. 先设计 XS 尺寸（最小屏幕），确保核心功能完整
2. 逐级增加布局复杂度，充分利用大屏空间
3. 每个断点只改布局，不改内容

### 内容优先（Content First）
- **XS–SM**：单列布局，内容堆叠，核心操作可见
- **MD–LG**：双列布局，侧边栏出现，导航展开
- **XL–XXL**：多列布局，提供更多信息密度

### 导航适配规则

| 断点 | 导航模式 | 说明 |
|:----|:---------|:-----|
| XS | 底部 Tab + 汉堡菜单 | 单手操作区域 |
| SM | 顶部栏 + 汉堡菜单 | 充分利用顶栏 |
| MD | 侧边栏（收起）+ 顶栏 | 侧栏可展开 |
| LG+ | 侧边栏（展开）+ 顶栏 | 完整导航 |

## 图片/资源适配

```html
<!-- 响应式图片 -->
<img src="small.jpg"
     srcset="medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="描述">
```

## 设计稿与前端对齐

| 设计稿宽度 | 对应断点 | 交付规范 |
|:----------|:--------|:---------|
| 375px | XS–SM | 移动端设计稿 |
| 768px | MD | 平板设计稿 |
| 1440px | XL | 桌面端设计稿 |

> 设计稿至少覆盖 XS（375px）、MD（768px）、XL（1440px）三个断点。