responsive-design

Responsive Design

Applicable Scenarios

• Multi-device adaptation (desktop/tablet/mobile)
• Landscape/portrait switching
• Container Queries
• PWA / adaptive applications

Inapplicable Scenarios

• Desktop-only internal tools
• Mobile-only native apps (use hig-principles)

Core Principles

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

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

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

Standard Breakpoints

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

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

Layout Patterns

Desktop

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

Tablet

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

Mobile

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

Responsive Specification Output

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

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

### 布局变化

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

### 内容降级

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

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

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

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

Mobile-First CSS Approach

/* 基础样式（移动端） */
.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;
  }
}

Workflow

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

Quality Self-Check

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

Common Pitfalls

1. Desktop-first——shrinking desktop designs directly results in a poor mobile experience
2. Too many breakpoints——5+ breakpoints have high maintenance costs
3. Touch targets too small——32px buttons are hard to tap on mobile
4. Hiding key content——the primary action cannot be found on mobile
5. Missing landscape handling——only portrait is considered
6. Ignoring Container Queries——all responsiveness uses viewport
7. Desktop does not consider narrow screens——it breaks when the browser is dragged narrow

Supporting Templates

• templates/responsive-accessibility-template.md — responsive rules + breakpoint configuration examples

Collaboration with Other Skills

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

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

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