如何正确利用CSS媒体查询实现响应式布局

媒体查询在开发者工具中生效但在真实移动设备上失效，通常是因为嵌套写法不被原生 css 支持——@media 规则必须独立于选择器之外，不能写在类内部。

媒体查询在开发者工具中生效但在真实移动设备上失效，通常是因为嵌套写法不被原生 css 支持——@media 规则必须独立于选择器之外，不能写在类内部。

CSS 原生语法（即非预处理器如 Sass）不支持媒体查询嵌套在选择器内部。你当前的写法：

.search-results {    width: 1000px;    padding-top: 100px;    margin: 0 auto;    @media (max-width: 900px) {  /* ❌ 错误：CSS 原生不识别此嵌套 */       width: 100vw;       padding-top: 40px;    }}

虽然 Chrome DevTools 的样式面板有时会“模拟”嵌套逻辑（尤其在启用某些实验性功能或误判为预编译 CSS 时），但真实浏览器解析时会直接忽略该 @media 块，导致移动端完全不生效。

✅ 正确写法是将 @media 规则提升至顶层，单独作用于目标选择器：

.search-results {    width: 1000px;    padding-top: 100px;    margin: 0 auto;}@media (max-width: 900px) {    .search-results {        width: 100vw;        padding-top: 40px;        /* 注意：100vw 包含滚动条宽度，如需严格占满可视区，可考虑用 100% 或 box-sizing 配合 */    }}

? 关键注意事项：

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

• ✅ 确保 <meta name="viewport"> 标签已正确添加（你已做到，这是基础前提）；
• ✅ 检查 CSS 文件是否被缓存——真机测试前建议硬刷新（iOS Safari 可关闭再重开标签页，或启用「请求桌面网站」后切回）；
• ⚠️ 100vw 在部分 Android 浏览器中可能因地址栏显示/隐藏导致视口宽度动态变化，若需更稳定表现，可用 width: 100% + max-width: 100% 替代；
• ? 若使用构建工具（如 Webpack/Vite），确认未意外启用了 PostCSS 插件（如 postcss-nested）却未实际安装——这会导致开发环境“看似正常”，但生产环境编译失败。

总结：媒体查询不是 CSS 选择器的子语句，而是并列的样式规则块。始终遵循「先定义基础样式，再用 @media 覆盖」的原则，才能确保跨设备一致性与可维护性。