“桌面1440、平板768、手机375”是常见交付尺寸，但真实访问宽度远不止三个。只为设备型号画稿，常会在笔记本分屏、横屏手机和小平板上出现尴尬断层。
更可靠的方法是建立可伸缩规则，并在导航、标题、卡片和表格无法继续保持可用时设置内容断点。
01 内容优先级先于网格
确认每个页面的核心任务、首要信息和辅助内容。容器变窄时决定重排、折叠、后置或换一种表达。
不要默认手机端删掉所有细节，关键决策信息在移动端仍然需要。
02 采用流式容器和明确上限
页面宽度变化时，内容区域可在最小和最大范围内伸缩，避免超宽屏行长过长，也避免小屏贴边。
间距和字号可以有限度流式变化，但需要可读性与触控下限。
何时需要新增断点
| 组件信号 | 说明 | 常见处理 |
|---|---|---|
| 导航换行或挤压 | 一级入口空间不足 | 折叠、分组或保留核心项 |
| 标题行长失控 | 过长难读或过短碎裂 | 调整字号、宽度和文案 |
| 卡片内容不平衡 | 按钮与文本互相挤压 | 减列、重排或改变卡片结构 |
| 表格关键列不可见 | 比较任务受阻 | 列优先、固定列或详情 |
| 图片主体被裁掉 | 比例不适合当前容器 | 提供焦点和不同裁切 |
| 表单触控困难 | 字段和按钮太小 | 单列、放大触控区 |
03 组件可以有自己的断点
同一组件可能出现在全宽页和侧栏中，仅依赖全局视口宽度不够。根据组件容器变化能提高复用。
设计文件应展示组件在最小、常规和最大宽度下的行为。
04 移动端导航需要重新设计
桌面Mega Menu不能直接缩成小字号。移动端要支持层级返回、可点击区域、焦点管理和快速联系。
重要CTA可保留，但固定元素不能遮挡内容。
05 用真实内容挑战布局
测试长公司名、多语言、极端数字、无图片、错误提示和系统字体放大。
占位文案越整齐，越容易隐藏响应式问题。
06 设计与开发共同验收中间宽度
浏览器逐步拖动、真实设备和自动截图都可帮助发现问题。只检查两端像素还原无法验证响应式规则。
上线后根据真实设备分布、页面性能和用户行为持续优化。
常见问题
响应式网站需要单独做平板稿吗？
当布局或任务在平板发生明显变化时需要，其他情况可用规则说明和关键示例。
断点可以完全由CSS框架决定吗？
框架提供默认值，但应根据内容和组件验证，必要时调整。
手机端内容可以和桌面不同吗？
可以调整顺序和表达，但关键事实应一致，避免SEO和用户认知冲突。
响应式图片怎么处理？
按展示尺寸、像素密度和裁切提供合适资源，避免所有设备下载同一大图。
如何验收响应式网站？
覆盖关键宽度、真实内容、触控、键盘、横屏和不同浏览器，不只看截图。
链接复制成功
