前端响应式设计标准

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

何时使用此技能

• 当创建或修改需要在手机、平板和桌面端都能正常工作的布局时
• 当从移动端布局开始实施移动优先的设计模式时
• 当编写媒体查询或特定于断点的样式时
• 当使用灵活的单位（rem、em、%）而不是固定像素以确保可伸缩性时
• 当使用基于百分比的宽度或 flexbox/grid 实现流式布局时
• 当确保触摸目标满足移动端的最小尺寸要求（44x44px）时
• 当针对不同屏幕尺寸和移动网络优化图像和资源时
• 当在多个设备尺寸和断点测试用户界面时
• 当在所有屏幕尺寸上保持排版可读性时
• 当通过布局决策在小屏幕上优先显示内容时
• 当在 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   (小型平板)
md: 768px   (平板)
lg: 1024px  (笔记本)
xl: 1280px  (桌面显示器)
2xl: 1536px (大型桌面显示器)

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 基础 */
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; /* 总尺寸: 48x48px */
  /* 或者使用 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 */
.small-text { font-size: 0.875rem; } /* 最小 14px */

排版指南：

• 正文：最小 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 /> {/* 移动端显示完整侧边栏 */}
  <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="英雄横幅"
>

或使用现代格式：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="英雄横幅">
</picture>

特定框架：

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

跨设备测试

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

测试清单：

• 手机 (375px – iPhone SE)
• 大屏手机 (414px – iPhone Pro Max)
• 平板 (768px – iPad)
• 笔记本 (1024px)
• 桌面显示器 (1440px)

测试方法：

1. 浏览器开发者工具的响应式模式
2. 真实设备测试（iOS/Android）
3. 浏览器扩展（Responsive Viewer）
4. 自动化视觉回归测试

需要检查的常见问题：

• 移动端出现水平滚动
• 文本溢出或被截断
• 元素重叠
• 字体大小难以阅读
• 触摸目标过小
• 图像未加载或变形

常见响应式模式

导航：

// 移动端：汉堡菜单
// 桌面端：水平导航
<nav className="lg:flex lg:items-center">
  <button className="lg:hidden">菜单</button>
  <ul className="hidden lg:flex lg:gap-4">
    <li>首页</li>
    <li>关于</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+）
• 在移动端对内容进行了优先级排序
• 针对不同尺寸优化了图像
• 在所有关键断点进行了测试
• 移动端无水平滚动
• 无重叠或截断的内容

快速参考