html响应式布局必须同时满足四层：viewport标签正确配置（置于最前且唯一）、流体结构（如max-width+相对单位）、内容驱动的断点策略（基于自然断裂点而非设备尺寸）、兼容性降级兜底（如旧android/ie11的flex/grid补丁）。
HTML网页要真正实现响应式布局兼容，不是加几个 @media 就完事——关键在于视口控制、流体结构、断点策略和降级兜底这四层必须同时生效。缺任何一层，都可能在 iOS Safari、旧版 Android WebView 或 IE11（若仍需支持）里直接失效。
viewport 标签漏写或写错会直接让响应式失效
这是最常被忽略的“启动开关”。没有它，移动端浏览器默认以 980px 宽度渲染页面，@media 规则全变成摆设。
- 必须写在
内，且只能写一次；重复或位置错误会导致部分浏览器忽略 - 基础写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要加
user-scalable=no—— WCAG 2.1 明确禁止，会触发可访问性审查失败 - 老项目若需兼容 IE9 及以下，得额外引入
css3-mediaqueries.js，但注意该脚本不支持calc()和现代选择器
媒体查询用 max-width 还是 min-width？取决于你是否移动优先
绝大多数新项目应采用“移动优先”策略：基础样式默认适配小屏，再用 @media (min-width: 768px) 逐级增强。反向用 max-width 容易导致大屏样式被小屏规则覆盖，调试时难以定位。
- 推荐断点参考（非固定）：
768px（平板竖屏）、1024px（平板横屏/小桌面）、1200px（标准桌面） - 避免像素魔数，比如
@media (max-width: 479px)—— 实际设备宽度存在 DPI 换算，用em或rem更稳妥：@media (max-width: 48em) - 别只查宽度，必要时结合
orientation: landscape或hover: hover做精细化适配
Flexbox/Grid 的兼容性陷阱在哪
Flexbox 在 iOS 8.4+、Android 4.4+ 基本可用，但旧版本有严重 bug：比如 flex-wrap: wrap 在 iOS 8.1–8.3 下完全不生效；Grid 则在 IE11 中使用的是过时语法（display: -ms-grid），且不支持 gap。
- 如需支持 iOS 8–9，避免用
flex: 1 1 auto，改用flex: 1+ 显式min-width - IE11 中 Grid 必须写双语法：
display: -ms-grid和display: grid，且列定义要用-ms-grid-columns - 所有 Flex/Grid 容器务必设
min-width: 0或overflow: hidden，防止子元素溢出（尤其含图片或文本时）
图片和字体的响应式经常被当成“次要问题”
一张 1920px 宽的 banner 图在 iPhone 上加载，不仅慢，还会撑破容器。字体没做响应处理，小屏上文字挤成一团，大屏上又空得吓人。
- 图片必须用
img { max-width: 100%; height: auto; }，否则width: 100%在某些 Android 4.x WebView 中会失效 - 关键图片建议用
<picture></picture>+srcset，例如：<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw"> - 字体大小别全用
px，主文本用rem，配合html { font-size: clamp(16px, 4vw, 20px); }（注意clamp()在 Safari 13.1+ 才支持）
真正难的不是写出能跑的响应式代码，而是判断哪些设备、哪些浏览器、哪些用户行为路径下你的“响应”其实没发生——比如 iOS 微信内置浏览器对 vh 单位的处理异常，或者安卓 Chrome 的地址栏隐藏/显示会动态改变 vh 值。这些细节不会报错，但会让布局在真实场景中突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
