viewport meta 标签是响应式基础，必须在 head 中添加 ；css 应用 rem/em 替代 px，配合动态根字号与媒体查询或 clamp() 实现真正适配；断点宜精不宜多，聚焦 375px、768px、1024px、1440px 四类典型宽度。
用 viewport meta 标签是起点，不是可选项
不加这个标签，移动端浏览器会按桌面宽度（通常是 980px）渲染页面，再缩放显示，导致文字小、按钮难点、布局错乱。它不是“锦上添花”，而是响应式生效的前提。
必须在 里写这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
常见错误：
• 忘记加，尤其在快速原型或 CMS 模板里；
• 写成 width=1200 这类固定值；
• 混淆 initial-scale 和 user-scalable=no —— 后者会禁用双指缩放，对可访问性不友好，别加。
CSS 里用 rem 或 em 替代固定 px 尺寸
像素单位写死就等于放弃适配能力。字体、边距、圆角这些地方一用 px，缩放或换设备就容易断裂。
立即学习“前端免费学习笔记（深入）”；
推荐做法：
• 根元素 font-size 动态设置（比如用 JS 监听 resize 或用 CSS @media 分段）；
• 其余尺寸统一用 rem，比如 padding: 1rem、font-size: 1.125rem；
• 表单控件、图标等小元素可用 em 配合父级字体继承，更灵活。
注意：rem 不是万能的——如果根字号没随视口变化，它只是“等比例缩放”，不是“真正响应”。得配合媒体查询或 clamp() 才完整。
用 @media 查询切关键断点，别堆满屏幕宽度
断点不是越多越好。主流设备宽度其实就几个典型区间：手机竖屏（~375px）、平板横屏（~768px）、小桌面（~1024px）、大桌面（~1440px）。超过 4 个断点，维护成本陡增，且多数新增断点对视觉影响微乎其微。
实操建议：
• 优先用 min-width，自下而上增强，避免覆盖混乱；
• 断点值用设备真实逻辑宽度，不是设计稿标尺（比如 iPhone SE 是 375px，不是 320px）；
• 别在每个组件里重复写相同断点，抽成 CSS 自定义属性或预处理器变量；
• 测试时关掉 Chrome DevTools 的“device toolbar”模拟，直接用真机 Safari / Chrome 切横竖屏，很多 bug 只在真机触发。
clamp() 能替代部分媒体查询，但别滥用
clamp(min, preferred, max) 让一个值在范围内弹性变化，比如 font-size: clamp(1rem, 2.5vw, 1.5rem)。它适合字号、行高、内边距这类需要平滑过渡的场景。
但它不是媒体查询的平替：
• 不支持复杂条件（比如“仅在横屏 + 宽度 > 768px 时生效”）；
• Safari 旧版本（font-size: 1.5rem 回退；
• 过度依赖会导致计算变慢，尤其是嵌套多层 clamp() 时，主线程压力明显；
• 值得注意的是：vw 单位本身会随视口宽高变化，如果容器被限制了宽度，vw 仍按整个视口算，可能出人意料。
复杂点在于：响应式从来不是单一技术的事。viewport、相对单位、媒体查询、flex/grid、图片 srcset、甚至字体加载策略，全得咬合着调。漏掉任意一环，都可能在某台设备上突然崩掉——而且往往是你没测过的那台。
