移动端css媒体查询失效的主因是viewport meta标签缺失或错误，必须唯一置于head最前，使用width=device-width和initial-scale=1.0，禁用max-device-width而改用max-width，并配合min-width断点、相对单位与弹性布局实现真正响应式。
没加 <meta name="viewport"> 标签，@media 就基本无效——这是 90% 的移动端响应式失效根源。
viewport meta 标签必须写对
很多开发者复制了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，但漏掉关键参数或拼写错误。安卓 WebView、微信内置浏览器、iOS Safari 都会因此把页面当桌面渲染，max-width: 768px 永远不触发。
-
width=device-width缺失 → 手机强制以 980px 宽度计算视口，媒体查询条件永远不满足 -
initial-scale=1.0缺失 → 页面可能被缩放，导致1px在不同设备上对应不同物理像素，断点错位 -
user-scalable=no不推荐加 —— 破坏可访问性，且 iOS Safari 16+ 已禁用该行为，反而让部分表单无法放大查看
min-width 断点比 max-width 更可靠
用 @media (min-width: 768px) 而不是 @media (max-width: 767px)，不是为了“移动优先”理念，而是为避免边界冲突和兼容性坑。
- 在精确宽度（如 768px）下，
max-width: 768px和min-width: 768px同时匹配，CSS 层叠顺序决定谁生效，行为不可控 - 主流框架（Bootstrap、Tailwind）统一用
min-width，是因为它天然支持“默认样式 + 增量增强”，减少覆盖逻辑 - 断点值建议按内容定，而非设备型号：常见取值为
576px（小屏手机）、768px（平板竖屏）、992px（宽屏平板/窄桌面）、1200px（标准桌面）
媒体查询必须配合相对单位与弹性布局
只改 font-size 或 margin 的像素值，解决不了根本问题。媒体查询是开关，真正起作用的是内部的布局机制。
- 用
rem或em替代固定px，让字号、间距随根字体缩放联动 -
flex布局中，flex-wrap: wrap+flex: 1 1 200px比单纯改width更适应不同视口 -
grid配合minmax()和auto-fit可实现列数自动调整，例如：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
暗色模式、减少动画等非宽度特性容易被忽略
现代响应式不只是适配屏幕尺寸，还要响应用户偏好。这些媒体特性在 Safari 14+、Chrome 87+、Firefox 97+ 已稳定支持，但常被遗漏。
-
@media (prefers-color-scheme: dark)可切换整套配色，比 JS 检测更轻量、更早生效 -
@media (prefers-reduced-motion: reduce)应用于transition和animation，避免触发眩晕症用户不适 -
@media (orientation: landscape)在横屏时调整主内容区域比例，尤其对视频、地图类组件很实用
最常被跳过的环节是：没验证真实设备上的视口宽度（比如用 Chrome DevTools 模拟器测完就上线），而不同 Android 厂商定制 WebView 对 device-width 解析有差异——真机调试不能省。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
