媒体查询在开发者工具中生效但在真实移动设备上失效，通常是因为嵌套写法不被原生 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 覆盖」的原则，才能确保跨设备一致性与可维护性。
