@media在手机浏览器不生效，90%是viewport标签错误：必须位于最顶部、含width=device-width和initial-scale=1.0、且全页面唯一；@media语法需严格正确；真机用document.documentelement.clientwidth验证；样式覆盖和特异性问题也需排查。
@media 在手机浏览器里不生效，90% 是 viewport 标签没写对或根本没写，不是 CSS 写错了，也不是浏览器不支持。
viewport meta 标签位置和内容必须严格满足三个条件
它不是“写了就行”，而是必须同时满足：位置在 最顶部、属性完整、无重复冲突。
- 必须紧贴
开始标签，前面不能有注释、JS 插入或模板占位符 - 必须包含
width=device-width和initial-scale=1.0，缺一不可；width=320或width=750这类固定值会让所有max-width断点失效 - 最终 HTML 源码中只能有一条
<meta name="viewport">，CMS、框架（如 Next.js、UniApp）可能悄悄注入一条，和你写的冲突
@media 语法错一个字符整块规则就被静默丢弃
浏览器不报错，DevTools 里也看不到提示，只表现为“完全没反应”。常见错误包括：
- 漏
and：@media screen (max-width: 768px)❌ → 必须是@media screen and (max-width: 768px)✅ - 空格缺失：
@media only screenand(max-width: 768px)❌ → 正确是@media only screen and (max-width: 768px)✅ - 括号不匹配或单位遗漏：
(width: 768)❌ → 应为(width: 768px)✅ - 拼写错误：
max-with、min-hieght等——这类错字直接导致整条规则被忽略
真机调试时用 document.documentElement.clientWidth 验证 viewport 是否生效
这是最直接的判断方式，比 DevTools 模拟更可靠：
- 返回值是
980或远大于设备逻辑宽度（如390、414、360），说明viewport完全没起作用 - Chrome DevTools 响应式模拟器会自动补全 viewport 行为，但微信、QQ 浏览器、系统自带 WebView 不会宽容
- 某些安卓 WebView（尤其旧版 UC、X5 内核）会无视
initial-scale=1.0，可临时加minimum-scale=1.0, maximum-scale=1.0测试，但不要长期依赖
样式被更高优先级规则覆盖，不是媒体查询没触发
断点“跑起来了”，但样式没体现出来，大概率是层叠机制在起作用：
- 打开 DevTools → 选中目标元素 → 看对应属性旁有没有横线划掉：有，说明被其他规则覆盖
- 别急着加
!important：它只是临时探针，掩盖真实问题，且 Safari 中因解析顺序可能导致行为异常 - 提升选择器特异性更可靠：比如把
.nav-link改成.header .nav-link，或确保媒体查询内选择器与 HTML 结构完全一致 - 注意书写顺序：媒体查询块必须放在基础样式之后；否则同权重下，后声明的规则会覆盖前面的
真正麻烦的从来不是断点值该设多少，而是 viewport 标签是否在 DOM 解析早期就被正确读取——这个动作发生在任何 CSS 解析之前，一旦错过，后续所有媒体查询都基于错误的视口宽度计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
