媒体查询没生效，90% 是因 viewport 标签缺失、错误或位置不当；必须置于 head 最顶部且唯一，拼写零容忍；@media 语法错一个字符即静默失效；样式覆盖、z-index 未配合定位、orientation 响应延迟等也需排查。
媒体查询没生效，90% 是因为 <meta name="viewport"> 标签缺失、写错或放错位置——它不是“锦上添花”，而是媒体查询能跑起来的硬性前提。
viewport 标签没配对或位置错了
浏览器在移动端默认用 980px 宽度渲染页面，@media (max-width: 768px) 自然永远不匹配。必须确保：
-
<meta name="viewport" content="width=device-width, initial-scale=1">出现在最顶部，且在所有<style></style>和<link rel="stylesheet">之前 - 拼写零容忍：
name="viewpoint"（少一个 p）、content="width=device"（漏-width）、content="width=375"（写死像素值）都会失效 - Next.js、UniApp 等框架可能自动生成该标签，但你手动再加一条，后加载的会覆盖前一个——打开真机的「查看网页源代码」确认最终 HTML 中只有一条、且内容正确
- 调试时运行
document.documentElement.clientWidth：返回 980 或远大于设备逻辑宽度（如 390/414），就说明 viewport 没生效
@media 语法错一个字符整块被忽略
CSS 解析器对媒体查询语法极其严格，出错不报错，只静默丢弃整条规则：
- 漏
and：@media screen (max-width: 768px)❌ → 必须是@media screen and (max-width: 768px)✅ - 拼写错误：
max-with、min-hieght、screenand（screen和and连写）都不行 - 括号/单位缺失：
@media (max-width: 768)❌（缺px）；@media (max-width: 768px {❌（右括号漏了） - 推荐写法：
@media (max-width: 480px)比@media (max-width: 768px)更稳妥，覆盖 iPhone SE（375px）、多数安卓小屏（360px–414px）
样式被更高优先级规则覆盖
媒体查询“触发了”，但样式没体现出来，大概率是 CSS 层叠机制在起作用：
- 用浏览器 DevTools 的「Computed」面板，看目标属性最终来自哪条规则，而不是只盯着「Styles」里有没有这条媒体查询
- 检查是否用了 ID 选择器、内联样式或
!important干扰了媒体查询内的声明 - 避免在媒体查询里写宽泛选择器，比如
div p容易被更精确的.content p覆盖 -
z-index在媒体查询里不起作用？先确认元素是否设置了position: relative（或其它定位值）——z-index只对定位元素生效
orientation 查询不触发或延迟响应
@media (orientation: landscape) 不是旋转瞬间就切换，它依赖重排完成，且只在逻辑宽度 > 高度时才匹配：
- 有些窄长屏手机横屏后宽度仍小于高度，导致不触发
- 首次加载时方向可能未初始化，建议加一条默认规则：
@media (orientation: portrait) { ... } - 更稳妥的写法是组合判断：
@media (orientation: landscape) and (min-width: 480px) - 别依赖
min-height媒体查询做高度适配——地址栏显隐、iOS 安全区变化都不会触发重排，dvh+clamp()才是现代方案
真正容易被忽略的点：viewport 标签的位置和唯一性，比断点数值本身重要得多；而语法错误最隐蔽，因为它不报错，只沉默失效——写完媒体查询，第一件事不是调样式，而是查 HTML 源码和 DevTools 的「Computed」面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
