把桌面网站“缩小”塞进手机，是灾难级的体验。真正的响应式是移动优先：先设计窄屏体验，再逐步增强到桌面。
内容、导航、触控、图片、表单，都要针对不同尺寸重新组织，而不是等比缩放。
核心理念：内容不变，形式随设备变化。判断标准：手机上也能顺畅完成核心任务。
把响应式做好的关键。
先窄屏后增强，避免“缩小版”体验。
百分比/Flex/Grid 自适应。
srcset/懒加载，按需加载。
桌面导航，移动汉堡。
点击目标 ≥44px，手势顺畅。
字号行宽随设备调整。
从设计到开发的标准做法。
按内容与设备定义断点，而不是只按设备型号。
先画窄屏稿，再增强到桌面，保证核心体验优先。
用相对单位与 Grid/Flex 实现自适应，图片按需加载。
在真实设备与模拟器上回归各断点，修正细节。
一套实用的断点参考。
| 断点 | 宽度 | 适配重点 |
|---|---|---|
| xs | <576px | 单列、汉堡导航、大触控 |
| sm | ≥576px | 双列布局、表单优化 |
| md | ≥768px | 三列、导航展开 |
| lg | ≥992px | 完整布局、多列 |
| xl | ≥1200px | 宽屏内容与留白 |
响应式一套代码、维护成本低，适合多数网站；重度移动业务可考虑单独移动端或小程序。
不影响，反而有益。统一 URL 与内容利于搜索引擎，移动端体验好还能加分。
用响应式图片（srcset/sizes）+ 懒加载 + WebP 压缩，按设备加载合适尺寸。
横向滚动、行列转换或卡片化，按表格复杂度选择最合适的方式。
