响应式布局怎么实现？

响应式布局成败的关键往往藏在那些看似微小却至关重要的细节里：一个拼错的 viewport 标签（如 viewpoint）、一张没加 height: auto 的图片、一组凭经验硬套的断点，或是在老安卓 WebView 中静默失效的 flex-wrap——这些“隐形陷阱”会让所有精心编写的媒体查询和弹性布局瞬间失效。本文直击开发者最易忽略的五大硬伤：viewport 的强制性与正确写法、替换元素的缩放控制、内容驱动的断点设定、老浏览器的兼容降级策略，以及真机测试的不可替代性，帮你避开响应式开发中最常踩的坑，让页面真正“随屏而变”，而不是在手机上永远显示缩放后的桌面版。

漏掉 ，其他所有响应式代码都白写——这是最常被跳过的硬性前提。

viewport 标签必须加，且不能写错

它不是“可选优化”，而是移动端浏览器渲染页面的开关。没它，@media 规则根本不会触发，手机上看到的永远是缩放后的桌面版。

• name="viewport" 拼错成 viewpoint 或漏写，整个标签失效
• content="width=device-width, initial-scale=1" 是唯一可靠写法；width=1200 这类固定值直接废掉响应能力
• 放在 最前面，避免页面闪动或重排；Vue/React 项目要手动检查 public/index.html 是否被模板覆盖
• 别加 maximum-scale 或 user-scalable=no，除非是 Kiosk 场景，否则破坏可访问性

图片和替换元素不设 max-width: 100% 就会溢出

默认情况下，、、