媒体查询在DevTools中生效，但在移动设备上无效

你遇到的问题是CSS嵌套媒体查询的兼容性问题：Chrome DevTools使用较新内核，能解析嵌套语法，但部分旧版本移动浏览器（比如iOS 15.4之前的Safari、部分安卓原生浏览器）不支持CSS Nesting模块特性，导致嵌套的媒体查询规则被直接忽略，所以移动设备上元素样式未发生变化。

解决方案 #

方案1：改用传统媒体查询写法（兼容性最优）

把媒体查询移到选择器外部，这是所有现代浏览器都支持的写法：

.search-results {
    width: 1000px;
    padding-top: 100px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .search-results {
        width: 100%; /* 推荐用100%替代100vw，避免横向滚动 */
        padding-top: 40px;
    }
}

方案2：保留嵌套语法但转译为兼容代码

如果项目依赖CSS嵌套语法，需要通过构建工具（比如PostCSS配合postcss-nesting插件）将嵌套代码编译为浏览器能识别的传统CSS格式，确保最终输出的样式是无嵌套的结构。

额外提示 #

建议用width: 100%替代100vw——100vw会包含浏览器滚动条宽度，在部分移动端可能导致不必要的横向滚动，而100%会自适应父容器宽度，更适配移动端布局。

内容的提问来源于stack exchange，提问作者Андрей Акимов