responsive-design

响应式设计

从最小视口和最重要的内容入手，再逐步增强。如果在 320px 下无法正常工作，就不该出现在 1920px 的设计中。

适用范围

在以下情况下使用此技能：

• 为不同视口和设备设计布局
• 定义或审查断点
• 实施移动优先的 CSS 策略
• 实施响应式图像和媒体
• 确保触控体验经过优化
• 设置响应式排版

原则

1. 移动优先，内容优先

从最小视口和最重要的内容入手，再逐步为更大的屏幕增强设计。

2. 让内容决定断点

在设计出现问题的地方设置断点，而不是根据设备宽度设置。“先从小屏幕开始，然后逐步扩大，直到效果糟糕为止。该设置断点了！”（Stephen Hay）。

3. 灵活胜过完美

网站不必做到像素级完美，但需要在每种设备上都美观且易用。

4. 四大构成要素

响应式设计由灵活布局、媒体查询、灵活媒体和灵活排版组成。

5. 内容编排

内容不仅要调整尺寸，还要适应视口的排列方式、优先级和呈现形式。

6. 渐进增强

为所有设备构建稳固的基础，再逐步增强对能力更强的系统的支持。

规则

应做：使用流式网格

• 使用基于百分比的宽度，而非固定像素值。
• 二维布局使用 CSS Grid，一维布局使用 Flexbox。
• 为整体容器设置最大宽度（例如，1200-1440px）。
• 优先从 12 列网格系统开始。

应做：在 CSS 中采用移动优先策略

• 为最小视口编写基础 CSS。
• 使用 min-width 媒体查询扩展对更大屏幕的支持。
• 避免将 max-width 媒体查询作为主要策略（那属于桌面优先）。

应做：实现响应式图像

• 使用 srcset，并至少提供 3 种图像尺寸（400px、800px、1200px）。
• 使用 picture 元素实现艺术指导。
• 设置 width 和 height 属性以防止 CLS。
• 为首屏以下的图像设置 loading="lazy"。
• 使用 WebP 或 AVIF 压缩图像。

应做：审慎设置断点

• 根据内容而非特定设备定义断点。
• 方向：320-480px（智能手机）、768px（平板电脑）、1024px（桌面）、1440px+（宽屏）。
• 在断点之间进行测试，确保布局保持稳定。
• 主要断点最多设置 4-5 个。

应做：优化触控体验

• 将触控目标尺寸设为至少 44x44px。
• 可点击元素之间至少保留 8px 间距。
• 在触控设备上，用轻触/点击操作替代悬停交互。
• 避免将拖放作为唯一的交互方式。

应做：使用响应式排版

• 使用相对单位（rem、em、clamp()）。
• 使用 clamp() 实现流式排版，让字号平滑缩放。
• 根据视口调整行长（最佳范围：每行 45-75 个字符）。

不应做：仅仅在移动设备上隐藏内容

• 不要仅为了移动设备而通过 display:none 隐藏内容。
• 应调整呈现方式：缩短文本、改变排列方式或使用更紧凑的组件。

不应做：强制水平滚动

• 确保没有元素的宽度超过视口。
• 以 320px 宽度作为最小尺寸进行测试。
• 仅在不得已时使用 overflow-x: hidden。

不应做：在桌面端使用汉堡菜单

• 在大屏幕上清晰展示主导航。
• 仅当视口宽度不足以容纳导航时，才使用汉堡图标。

模式

响应式布局（流式网格）

使用基于百分比宽度的 12 列网格。页面结构使用 CSS Grid，组件布局使用 Flexbox。至少在 768px 和 1024px 处设置断点。详细信息和代码示例请参见 references/fluid-grid.md。

内容编排

为每个页面定义不同视口下的内容顺序。移动设备优先显示最重要的内容。桌面端使用分栏布局，在主要内容旁展示次要内容。

卡片布局

适用于内容单元结构相同的场景（博客文章、产品、团队成员）。卡片采用灵活的网格布局，可自动从 3 列以上调整为 1 列。每张卡片的结构都相同（图片、标题、摘要、行动号召）。

随滚动行为变化的粘性页眉

适用于页面滚动深度较大的场景：向下滚动时隐藏页眉，向上滚动时显示页眉。移动端：采用紧凑版本（徽标 + 汉堡菜单）。桌面端：显示完整导航。

响应式导航

桌面端采用完整的水平导航。移动端采用汉堡图标，搭配滑入式或全屏覆盖层。设置导航换行的断点。

反模式

按设备而非内容设置断点

将断点设置为设备的精确宽度（iPhone 为 375px，iPad 为 768px）。设备种类过于繁杂。解决方案： 在布局出现问题时设置断点。

在桌面布局上修补响应式设计

事后通过媒体查询修补桌面设计。这会导致内容被隐藏，解决方案也有所妥协。解决方案： 从一开始就采用响应式设计思路，并优先考虑移动端。

固定像素布局

列宽和间距使用固定像素值。布局在意料之外的视口尺寸下会错乱。解决方案： 使用百分比宽度、rem/em、clamp()。

缺少视口元标签

没有 <meta name="viewport" content="width=device-width, initial-scale=1">。移动浏览器会按桌面宽度渲染页面。解决方案： 在每份 HTML 文档中加入视口元标签。

检查清单

布局

• 使用灵活的网格系统（12 列或同等方案）
• 列宽使用百分比，不使用固定像素
• 为容器设置 max-width
• 在任何视口下都不会出现水平滚动

断点

• 采用移动端优先的方法（min-width 媒体查询）
• 至少设置 3 个断点（移动端、平板、桌面端）
• 根据内容而非设备确定断点
• 布局在各断点之间保持稳定

图片和媒体

• srcset 至少包含 3 种尺寸
• 以 WebP 或 AVIF 作为主要格式
• 为首屏以下的内容设置 loading="lazy"
• 设置 width 和 height 属性

排版

• 字号使用 rem 或 clamp()
• 所有视口下的行长均为 45-75 个字符

导航和触控

• 桌面端显示可见导航
• 触控目标至少为 44x44px
• 可点击元素之间留有足够间距

性能和测试

• Lighthouse 移动端得分高于 90
• 存在视口元标签
• 已在 320px、768px、1024px、1440px 下测试
• 已在真实设备上测试

交叉引用

• usability -- 必须通过响应式设计满足的可用性要求
• navigation-design -- 响应式导航详解
• images-media -- 图片优化和响应式图片策略
• web-typography -- 响应式排版规则
• accessibility -- 触控优化和移动端无障碍设计