PostCSS 处理媒体查询时样式没生效是怎么回事？

司马雨路提问于 2026-03-24 22:01:21 阅读 4

工具

我在用 PostCSS 的 autoprefixer 和 nested 插件，写了个响应式组件，但媒体查询里的样式完全没起作用，控制台也没报错，本地开发环境和构建后都一样。

我试过把媒体查询提到最外层、检查了 CSS 优先级，也确认了 PostCSS 配置里启用了相关插件，还是不行。是不是写法有问题？

const Banner = () => {
  return (
    <div className="banner">
      <h1>欢迎</h1>
    </div>
  );
};

对应的 CSS 是这样写的（通过 css-modules 引入）：

.banner {
  background: blue;
  @media (max-width: 768px) {
    background: red;
  }
}

Grid布局动画效果

我来解答赞 3 收藏

反馈

1 条解答

公孙啸垄 Lv1

这个问题听起来挺常见的，有时候就是一些小细节没注意到。既然你已经确认了 PostCSS 配置和 CSS 优先级，那我们再仔细检查一下可能的问题点。

首先，确保你的 PostCSS 配置文件（通常是 postcss.config.js 或类似的文件）里正确地引入了 autoprefixer 和 nested 插件，并且顺序是对的。nested 插件通常需要在 autoprefixer 之前。

其次，检查一下你的 CSS Modules 是否正确应用了。有时候 CSS Modules 生成的类名可能和你在代码里写的不一样，导致样式不生效。可以在浏览器开发者工具里检查一下实际应用的类名是否正确。

最后，尝试一下把媒体查询的写法稍微调整一下，有时候这种嵌套写法在某些配置下可能会有问题。可以试试改成非嵌套的形式：

.banner {

  background: blue;

}

@media (max-width: 768px) {

  .banner {

    background: red;

  }

}

这样写的话，确保媒体查询里的选择器和外部的选择器是一致的。

一般这样处理应该能解决大部分媒体查询不生效的问题。如果还不行，可能就需要检查一下项目的其他配置了，比如 webpack 或其他构建工具的配置。

2026-03-24 22:02