常见响应式交付是先做1440像素桌面稿，再补一张375像素手机稿。平板、折叠屏、横屏和中间宽度由开发自行猜，页面因此在最常见的“中间尺寸”出问题。
响应式设计应建立规则：容器变窄时，什么保留、什么换行、什么折叠、什么改变交互，而不是只交两个静态截图。
01 先按内容价值排序
移动端空间有限，不等于简单隐藏所有次要内容。先明确用户在各场景的核心任务和决策信息。
同一模块在桌面可能并列展示，在手机可改为分段、折叠或优先显示关键项。
02 断点由内容失效决定
不要只按某几款设备型号设断点。拖动容器观察导航、卡片、标题、表格何时拥挤或失去可读性，在这些位置切换布局。
设计系统可定义主要容器和组件断点，同时允许局部组件根据自身宽度变化。
常见组件的响应式策略
| 组件 | 宽屏表现 | 窄屏策略 |
|---|---|---|
| 导航 | 完整菜单与多操作 | 折叠菜单、保留核心CTA |
| 卡片列表 | 多列网格 | 减少列数或横向滚动需谨慎 |
| 图文模块 | 左右并排 | 上下重排，内容优先 |
| 数据表格 | 多列比较 | 列优先级、固定关键列或卡片化 |
| 表单 | 多字段并排 | 单列、正确键盘和大触控区 |
| 图表 | 完整轴与图例 | 简化标签、支持详情与横屏 |
03 字体和间距使用区间，不机械缩放
大标题可以在宽度变化时采用流式字号，但正文可读性和行长需要稳定。
触控目标不能因为页面变小而缩到难以点击，移动端还要考虑安全区和浏览器工具栏。
04 图片与媒体按用途裁切
同一横幅在手机上直接缩小，主体可能看不清。为关键图片定义焦点、比例和不同裁切，提供响应式资源。
视频和动效在移动网络上要有封面、降级和暂停控制。
05 设计文件要表达规则
使用Auto Layout、约束和组件变体模拟真实变化；标注最大宽度、最小宽度、换行和隐藏逻辑。
开发交付时说明中间尺寸，而不是只对照桌面和手机像素。
06 在真实设备和内容下测试
测试长标题、多语言、大字号、异常数据、横屏和触控。设计工具中的理想占位内容通常过于整齐。
上线后结合设备分布和真实用户问题调整，避免只维护最初两张稿。
常见问题
响应式设计需要画多少个尺寸？
没有固定数量，应覆盖主要布局变化和关键边界，并用规则说明中间状态。
移动端可以删掉桌面内容吗？
可以重排、折叠或后置，但关键任务和必要信息不应无理由消失。
表格在手机上必须改成卡片吗？
不一定。可用列优先级、水平滚动、固定列或详情页，按比较任务选择。
断点应该由设计还是开发决定？
双方共同确定，设计基于内容与体验，开发结合技术实现和现有系统。
响应式和自适应有什么区别？
术语使用不一，通常响应式强调流式变化，自适应强调预设布局；实际项目可组合。
链接复制成功
