Frontend Responsive Design Standards

前端响应式设计标准

规则： 采用移动优先开发，使用一致的断点、流式布局、相对单位和适合触控的目标区域。

何时使用此技能

• 创建或修改需要适配手机、平板和桌面设备的布局时
• 从移动端布局开始实施移动优先设计模式时
• 编写媒体查询或特定断点样式时
• 使用灵活单位（rem、em、%）而非固定像素，以提高可扩展性时
• 使用基于百分比的宽度或 flexbox/grid 实现流式布局时
• 确保触控目标符合移动端最小尺寸要求（44x44px）时
• 针对不同屏幕尺寸和移动网络优化图片和资源时
• 在多种设备尺寸和断点下测试 UI 时
• 确保所有屏幕尺寸下的排版均易于阅读时
• 通过布局决策优先展示小屏幕上的内容时
• 使用 CSS 框架中的响应式设计工具（Tailwind、Bootstrap 响应式类）时

此技能为 Codex 提供具体指导，帮助其遵循与前端响应式处理相关的编码标准。

移动优先开发 - 必须遵守

始终从移动端布局开始，再针对更大的屏幕进行增强。

不好的做法（桌面优先）：

.container {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

好的做法（移动优先）：

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    grid-template-columns: repeat(4, 1fr);
  }
}

移动优先的原因：

• 强制优先考虑内容
• 在移动端性能更佳（无需覆盖样式）
• 渐进增强优于优雅降级

标准断点

明确并一致地使用项目断点：

常见断点系统：

Tailwind：

sm: 640px   (small tablets)
md: 768px   (tablets)
lg: 1024px  (laptops)
xl: 1280px  (desktops)
2xl: 1536px (large desktops)

Bootstrap：

sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px

创建新断点前，先检查现有代码库中的断点定义。

用法（Tailwind）：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

用法（CSS）：

@media (min-width: 768px) { }
@media (min-width: 1024px) { }

除非有明确要求，否则切勿使用 850px 或 1150px 等任意断点。

流式布局

使用可适应屏幕尺寸的灵活容器：

不好的做法（固定宽度）：

.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }

好的做法（流式布局）：

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 300px 1fr;
  }
}

流式布局的模式：

• Flexbox：flex: 1、flex-grow、flex-shrink
• Grid：1fr、minmax()、auto-fit、auto-fill
• 百分比宽度：width: 100%、max-width: 1200px
• 容器查询（现代）：@container (min-width: 400px)

使用相对单位而非固定像素

使用 rem/em 提高可扩展性和可访问性：

不好的做法：

font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;

好的做法：

font-size: 1rem;      /* 16px base */
padding: 1.25rem;     /* 20px */
margin: 0.625rem;     /* 10px */
border-radius: 0.5rem; /* 8px */

各单位的适用场景：

• rem：字体大小、间距、布局尺寸（随根字体大小缩放）
• em：相对于组件的尺寸（随父级字体大小缩放）
• %：相对于父级的宽度和高度
• px：边框（1px）、阴影、非常小的值
• vw/vh：完整视口尺寸、首屏区域
• ch：基于文本的宽度（例如，使用 max-width: 65ch 控制行长以提高可读性）

框架工具会自动处理这些设置：

<div className="text-base p-5 m-2.5 rounded-lg">

适合触控的设计

最小触控目标尺寸：44x44px（iOS）/ 48x48px（Android）

不好的做法：

.icon-button {
  width: 24px;
  height: 24px;
}

好的做法：

.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px; /* Total: 48x48px */
  /* Or use min-width/min-height */
  min-width: 44px;
  min-height: 44px;
}

触控目标检查清单：

• 按钮最小尺寸为 44x44px
• 文本中的链接间距充足
• 表单输入框高度足够（最小 44px）
• 图标按钮添加内边距，扩大可点击区域
• 交互元素之间的间距至少为 8px

易读的排版

确保字体大小易于阅读，无需缩放：

不好的做法：

body { font-size: 12px; }
.small-text { font-size: 10px; }

好的做法：

body { font-size: 1rem; } /* 16px minimum */
.small-text { font-size: 0.875rem; } /* 14px minimum */

排版指南：

• 正文：至少 16px（1rem）
• 小号文本：至少 14px（0.875rem）
• 行高：正文为 1.5，标题为 1.2
• 行长：45-75 个字符（使用 max-width: 65ch）
• 对比度：至少达到 WCAG AA 标准（普通文本为 4.5:1）

响应式排版：

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
  }
}

或使用 clamp 实现流式效果：

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

移动端内容优先级

优先展示最重要的内容，隐藏或折叠次要内容：

不佳：

<div>
  <Sidebar /> {/* Full sidebar on mobile */}
  <MainContent />
</div>

良好：

<div className="flex flex-col lg:flex-row">
  <MainContent className="order-1" />
  <Sidebar className="order-2 hidden lg:block" />
</div>

策略：

• 在移动端隐藏非必要元素
• 使用汉堡菜单进行导航
• 折叠次要内容的手风琴面板或标签页
• 在移动端将布局垂直堆叠
• 使用 order 属性调整内容顺序

图片优化

为不同尺寸的设备提供合适的图片：

不佳：

<img src="hero-4000x3000.jpg" alt="Hero">

良好：

<img
  src="hero-800x600.jpg"
  srcset="
    hero-400x300.jpg 400w,
    hero-800x600.jpg 800w,
    hero-1600x1200.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Hero"
>

或使用现代格式：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero">
</picture>

针对不同框架：

// Next.js
<Image
  src="/hero.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero"
/>

跨设备测试

完成工作前，请在关键断点验证布局：

测试清单：

• 移动设备（375px - iPhone SE）
• 大屏移动设备（414px - iPhone Pro Max）
• 平板电脑（768px - iPad）
• 笔记本电脑（1024px）
• 桌面设备（1440px）

测试方法：

1. 浏览器 DevTools 响应式模式
2. 在真实设备上测试（iOS/Android）
3. 浏览器扩展（Responsive Viewer）
4. 自动化视觉回归测试

需要检查的常见问题：

• 移动端出现水平滚动
• 文本溢出或截断
• 元素重叠
• 字号难以辨认
• 触控目标过小
• 图片无法加载或变形

常见响应式模式

导航：

// Mobile: Hamburger menu
// Desktop: Horizontal nav
<nav className="lg:flex lg:items-center">
  <button className="lg:hidden">Menu</button>
  <ul className="hidden lg:flex lg:gap-4">
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

网格布局：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

侧边栏布局：

.layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .layout {
    flex-direction: row;
  }
  .sidebar { width: 300px; }
  .content { flex: 1; }
}

验证清单

完成响应式工作前：

• 从移动端布局开始
• 使用项目的标准断点
• 实现流式布局（不使用固定宽度）
• 使用相对单位（rem/em）设置尺寸
• 触控目标至少为 44x44px
• 无需缩放即可清晰阅读排版（正文为 16px+）
• 优先安排移动端内容
• 针对不同尺寸优化图片
• 在所有关键断点进行测试
• 移动端没有水平滚动
• 没有内容重叠或截断

快速参考

场景	操作
开始新布局	从移动端开始（320-375px）
需要设置断点	使用项目标准（检查现有代码）
设置宽度	使用 width: 100% + max-width
设置字号	使用 rem（16px = 1rem）
设置间距	使用 rem 或框架实用类
按钮太小	确保最小为 44x44px，并设置内边距
文本太小	正文至少为 16px（1rem）
测试布局	检查 375px、768px、1024px、1440px
图片加载缓慢	使用 srcset 和现代格式