viewport meta 标签必须置于所有 link、script 和 title 之前，否则 iOS Safari 和部分 Android WebView 会缩放异常；媒体查询应使用 rem 单位并采用移动优先写法；grid 布局需用 @supports 包裹并提供真实可用的 flex 回退；图片和 iframe 必须设置 max-width: 100%；响应式是涵盖 HTML、CSS、JS 的整套约束体系。
viewport meta 标签必须写在 最前面
不加或加错位置会导致移动端首次渲染就缩放异常，iOS Safari 尤其敏感。<meta name="viewport" content="width=device-width, initial-scale=1"> 必须出现在所有 <link>、<script> 之前，否则部分 Android WebView 会忽略它。
常见错误：
- 把 viewport 放在
<title>后面甚至 CSS 引入之后 - 漏掉
initial-scale=1，导致页面默认缩放到 0.5 倍（老版 UC 内核典型表现） - 写成
width=320这类固定值，彻底破坏响应能力
媒体查询中 max-width 要用 rem 或 em，别用 px
用 px 写断点（如 @media (max-width: 768px)）在用户手动调大系统字体时会失效——因为浏览器按物理像素判断，但用户实际看到的布局区域已变窄。用 rem 才能随根字体缩放联动。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 48rem)（对应 16px × 48 = 768px 基准） - 配合
html { font-size: 100%; }保持基准稳定 - 避免嵌套多层媒体查询，优先用移动优先写法：先写小屏样式，再用
min-width逐步增强
flex 和 grid 的 fallback 要真实可用
只写 display: grid 不加 display: flex 回退，在 IE11 或旧版 Safari 上会直接塌陷。但简单加 display: flex 也不行——flex 主轴方向、换行逻辑和 grid 完全不同。
实操要点：
- 用
@supports (display: grid)包裹 grid 样式，内部再写完整 flex 布局代码 - 避免依赖
grid-template-areas做关键结构，它在不支持的浏览器里无法降级为有意义的流式布局 - 测试时真机打开 IE11 模拟器或 Safari 10，别只信 Can I Use 的“支持”标记
图片和 iframe 必须设 max-width: 100%
没加这句的 <img> 或嵌入视频，在小屏上会水平溢出并触发滚动条，且无法通过 pinch-zoom 缩放内容区域。
正确做法：
- 全局重置：
img, iframe, video { max-width: 100%; height: auto; } - 对
<picture>中的<source>，也要确保每个srcset提供的图宽都覆盖目标容器最大可能尺寸 - 慎用
object-fit: cover，它在低端 Android 上渲染性能差，且裁剪逻辑不易预测
最易被忽略的是：响应式不是“加了 media query 就完事”，而是整套约束体系——从 HTML 结构是否语义化、CSS 是否脱离设备像素依赖、到 JS 初始化时机是否等 DOM 尺寸稳定。任何一个环节松动，都会让断点在真实机型上失效。
