CSS媒体查询嵌套错误造成移动端样式失效的解决方案

本文讲解如何修正css中媒体查询的错误嵌套写法，确保响应式样式在真实移动设备上正常生效，重点指出@media规则必须独立于选择器之外，而非嵌套在类定义内部。

本文讲解如何修正css中媒体查询的错误嵌套写法，确保响应式样式在真实移动设备上正常生效，重点指出@media规则必须独立于选择器之外，而非嵌套在类定义内部。

在开发响应式网页时，一个常见却隐蔽的错误是将 @media 规则直接嵌套在 CSS 类选择器内部（如 .search-results { ... @media (...) { ... } }）。这种写法不符合标准 CSS 语法，虽然部分现代浏览器的开发者工具（如 Chrome DevTools）在模拟模式下可能“宽容”地解析并应用该样式，但真实移动设备上的原生浏览器（尤其是 Safari iOS、Android WebView 等）会完全忽略嵌套的媒体查询，导致样式回退到桌面端设定值——这正是你观察到“DevTools 正常、真机失效”的根本原因。

正确的写法是将 @media 声明作为顶层规则独立书写，明确指定目标选择器：

.search-results {    width: 1000px;    padding-top: 100px;    margin: 0 auto;}/* ✅ 正确：@media 为独立规则，作用于 .search-results */@media (max-width: 900px) {    .search-results {        width: 100vw;        padding-top: 40px;    }}

⚠️ 注意事项：

• 不要依赖预处理器语法混淆认知：Sass/Less 支持嵌套 @media，但纯 CSS 不支持。若未使用预处理器编译，直接写入 .css 文件的嵌套写法将无效；
• 验证 viewport 设置：你已正确添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，这是前提，但无法挽救语法错误；
• 真机测试不可替代：DevTools 的响应式模拟仅作初步调试，务必在 iOS 和 Android 真机上验证最终效果；
• 断点合理性建议：max-width: 900px 覆盖了部分平板设备，如专注手机适配，可考虑 max-width: 767px 或使用 @media (max-width: 480px) 等更典型的移动断点。

总结：CSS 是声明式语言，@media 是条件规则（at-rule），必须与选择器平级，不可作为属性嵌套。修正结构后，样式即可在所有符合标准的浏览器中一致生效。

立即学习“前端免费学习笔记（深入）”；