responsive-design

响应式设计

将这些规则应用于每种布局和交互界面。示例采用与框架无关的 CSS，可直接转换为任何框架或工具系统。响应式界面会适应视口、容器、输入方式以及用户自己的设置，而不是适配固定的设备列表。详细规则和代码示例收录在 ./reference/ 下。应用或引用规则前，请先阅读相关文件。

核心要求

根据内容和限制进行设计，而不是针对特定设备。布局在约 320px 到超宽屏的任意宽度、横竖屏方向、最高 400% 的缩放下，以及触控或指针输入时，始终保持可用、易读，并尊重用户的字体大小、动态效果和配色方案偏好，才称得上响应式。从最小的合理宽度开始设计，再逐步增强，这种方法称为移动优先。这样可以减少 CSS，并让基线设计在所有环境中都能正常工作。

切勿根据设备品牌、操作系统或产品名称来决定布局。这些因素会不断变化，种类也越来越多。让内容决定布局何时需要改变。

确认

如果你只是在审查，请直接报告发现的问题，不要暂停。修改现有文件前，请先确认预期的变更范围；如果需要更多上下文才能准确判断，请先询问，不要猜测。

严重程度等级

等级	含义
严重	在常见尺寸或输入方式下，内容无法访问、无法阅读或无法使用
较高	水平滚动、内容被裁切或目标不可用造成明显阻碍
中等	存在可通过变通方式解决的明显阻碍
轻微	对使用影响较小的细节欠缺

应根据任务在实际尺寸和输入方式下受到的真实影响来判断严重程度，而不是仅依据规则。静态审查时，仅靠阅读代码无法确认视口行为、缩放、方向和触控响应，因此应标记为待验证，而不是已通过。

参考索引

规则和代码示例收录在 ./reference/ 下。应用或引用规则前，请先阅读相关文件。

• 基础：
  • reference/foundation.md — 建立基础
  • reference/strategies.md — 响应式策略
  • reference/breakpoints.md — 断点是惯例，而非标准
• 布局：
  • reference/layout-tools.md — 现代布局工具
  • reference/container-queries.md — 媒体查询与容器查询
  • reference/layout-patterns.md — 布局模式
• 输入与易用性：
  • reference/input-methods.md — 适配输入方式
  • reference/safe-areas.md — 安全区域
• 内容：
  • reference/typography.md — 响应式排版
  • reference/images.md — 响应式图像
  • reference/user-preferences.md — 用户偏好
• 测试：
  • reference/checklist.md — 测试清单

反模式

• 断点以设备或操作系统命名，而不是根据内容设置。
• 固定像素宽度导致小屏幕出现水平滚动。
• 仅支持悬停的控件，没有指针或键盘操作的替代方式。
• 使用 width: 100vw，忽略滚动条并导致溢出。
• 使用 user-scalable=no 或 maximum-scale 上限禁用缩放。

---

作者：@planetabhi