responsive-design

name	responsive-design
description	设计跨设备适配时使用。适用于桌面/平板/移动端的布局、断点策略、内容优先级。优先使用 Mobile-First + 5 个标准断点 + 内容优先级降级策略。

响应式设计

适用场景

• 多设备适配（桌面/平板/移动）
• 横竖屏切换
• 容器查询（Container Queries）
• PWA / 自适应应用

不适用场景

• 仅桌面端的内部工具
• 仅移动端的原生 App（用 hig-principles）

核心原则

Mobile-First（移动优先）：
  从小屏开始设计，再向上扩展
  原因：小屏限制更多，逼着抓重点

内容优先级降级：
  屏幕变小时，砍次要内容，不是缩小所有内容

触控目标：
  移动端：最小 44×44px（Apple HIG）
  桌面端：最小 32×32px

标准断点

mobile-sm:  < 480px   （小手机）
mobile:     480~768px （手机）
tablet:     768~1024px（平板）
desktop:    1024~1440px（桌面）
desktop-lg: > 1440px  （大屏）

简化版（推荐）：
  mobile:  < 768px
  tablet:  768~1024px
  desktop: > 1024px

布局模式

桌面端

模式：多列布局 / 侧边栏 / 高信息密度
- 顶部导航 + 侧边栏 + 主内容
- 表格全字段展示
- 多列卡片网格
- Hover 交互可用

平板

模式：双栏到单栏过渡
- 顶部导航（侧边栏可折叠）
- 表格保留主要字段
- 2 列卡片网格
- 触控为主，部分 Hover

移动端

模式：单列布局 / 底部操作 / 极简内容
- 顶部导航简化（汉堡菜单 / Tab Bar）
- 表格转卡片或横向滚动
- 单列卡片
- 主操作放底部（Bottom Sheet / FAB）
- 仅触控

响应式说明输出

## 响应式规则：[页面名]

### 断点策略
- Mobile: < 768px
- Tablet: 768~1024px
- Desktop: > 1024px

### 布局变化

| 元素 | Desktop | Tablet | Mobile |
|------|---------|--------|--------|
| 导航栏 | 顶部水平 | 顶部水平 | 汉堡菜单 |
| 侧边栏 | 固定显示 | 默认折叠 | 抽屉式 |
| 商品网格 | 4 列 | 2 列 | 1 列 |
| 数据表格 | 全字段 | 主要字段 | 转卡片 |
| 主操作 | 顶部右侧 | 顶部右侧 | 底部固定 |

### 内容降级

桌面端内容：
- 商品标题 + 副标题 + 评分 + 价格 + 详细描述 + 标签

移动端只保留：
- 商品标题 + 价格 + 主图

### 触控目标
- 所有可点击元素：最小 44×44px（移动端）
- 列表项：最小高度 56px

### 异常处理
- 横屏移动：按平板处理
- 超大屏（>1920px）：内容居中，最大宽度 1440px

Mobile-First CSS 思路

/* 基础样式（移动端） */
.card {
  padding: 16px;
  font-size: 14px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .card {
    padding: 24px;
    font-size: 15px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .card {
    padding: 32px;
    font-size: 16px;
  }
}

工作流程

1. 列出所有设备和断点
2. 从移动端开始设计（最小屏）
3. 列出移动端必须有的内容
4. 列出桌面端补充的内容
5. 设计断点之间的过渡
6. 验证触控目标尺寸
7. 输出响应式说明

质量自检

□ 是否从移动端开始设计
□ 是否定义了断点
□ 是否说明了每个断点的布局
□ 触控目标是否 ≥ 44px（移动端）
□ 横屏移动如何处理
□ 内容降级策略是否明确
□ 是否考虑了超大屏

常见坑

1. 桌面优先——把桌面设计直接缩小，移动端体验差
2. 断点太多——5+ 个断点维护成本高
3. 触控目标太小——移动端按钮 32px 难点
4. 隐藏关键内容——移动端找不到主操作
5. 横屏处理缺失——只考虑竖屏
6. 忽略 Container Queries——所有响应式都用 viewport
7. 桌面端不考虑窄屏——拖窄浏览器就崩

配套模板

• templates/responsive-accessibility-template.md — 响应式规则 + 断点配置示例

与其他 skill 的协作

上游：
  page-structure → 提供页面元素
  information-architecture → 导航结构

平行：
  design-tokens → 断点 token
  hig-principles → 移动平台原则

下游：
  design-handoff → 交接给前端