如何正确使用 CSS 媒体查询实现响应式布局-html教程-PHP中文网

媒体查询在开发者工具中生效但在真实移动设备上失效，通常是因为嵌套写法不被原生 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 规则提升至顶层，单独作用于目标选择器：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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 配合 */
    }
}

? 关键注意事项：

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

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