标准css不允许@media嵌套在选择器内部，如.btn { @media (max-width: 768px) { display: none; } }会直接被浏览器忽略，必须将其作为顶层规则独立书写，例如.btn { display: block; } @media (max-width: 768px) { .btn { display: none; } }。
媒体查询不能嵌套在选择器内部
标准 CSS 不允许把 @media 写在类选择器大括号里，比如 .btn { @media (max-width: 768px) { display: none; } } 这种写法浏览器会直接忽略，尤其在 Safari iOS、Android WebView 等环境下完全不生效——DevTools 里看着正常，真机上就没了。
必须把 @media 当作顶层规则独立书写：
.btn {
display: block;
}
@media (max-width: 768px) {
.btn {
display: none;
}
}
- 所有现代 CSS 预处理器（如 SCSS）编译后也必须产出这种结构，不能依赖“语法糖”掩盖底层规则
- Next.js、Vue scoped style、CSS Modules 等环境里，
@media仍需独立于选择器外，否则打包后照样失效 - 检查已生成的 CSS 文件，确认
@media前没有缩进或包裹在其他花括号内
viewport meta 标签拼写错误或缺失
没有它，媒体查询根本不会触发。常见错误是 intial-scale 拼错，或者漏掉 width=device-width。
正确写法只有一行，且必须放在 中：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width是关键，缺了它浏览器就按桌面宽度（通常是 980px）渲染 -
initial-scale=1.0不能写成intial-scale或inital-scale，拼错等于没写 - 部分项目加了
shrink-to-fit=no是为了禁用 Safari 自动缩放，但非必需；优先确保前两项准确
flex 子容器在 Firefox 中消失
当父容器是 display: flex，子元素也设了 display: flex，但在 Firefox 下整个子容器不可见——大概率是父容器没设 min-height: 0。
原因：Firefox 默认对 flex 项应用 min-height: auto，如果子容器内容为空或高度计算异常，就会塌陷。
- 在父 flex 容器上显式声明
min-height: 0 - 不要依赖 Chrome 的宽容行为，这个差异在真实设备混合环境中极易暴露
- 同理，
min-width: 0也能解决某些 inline-flex 场景下的宽度塌陷
选择器权重或作用域导致嵌套样式不匹配
不是所有“嵌套”都指语法嵌套，更多时候是 DOM 层级太深 + CSS 选择器写法不当，导致样式压根没命中。
比如 HTML 是 <div class="card"><div class="body"><p class="text">xxx</p></div></div>，但 CSS 写成 .card .body p.text ——看着没问题，但只要中间某层 class 改名或结构微调，就立刻失效。
- 优先用语义化 class，比如
.card-body-text，而不是靠层级推导 - BEM 命名（如
.card__body、.card__text）天然规避深层嵌套歧义 - Vue/React 中启用了
scoped或 CSS Modules，要确认生成的 class 名是否和 DevTools 里看到的一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
