PostCSS 处理媒体查询时为啥没生效？

轩辕治博提问于 2026-02-27 09:49:19 阅读 18

工具

我用 PostCSS 的 autoprefixer 插件处理 CSS，但写好的媒体查询在编译后完全没加前缀，也没报错，是配置漏了什么吗？

我的 PostCSS 配置文件里只加了 autoprefixer，媒体查询代码类似这样：

@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

但输出的 CSS 和输入一模一样，连 -webkit- 前缀都没加，是不是 autoprefixer 本来就不处理媒体查询？还是我理解错了？

我来解答赞 6 收藏

反馈

1 条解答

小世豪 Lv1

autoprefixer 不处理媒体查询里的属性前缀，它只负责给 CSS 属性加浏览器前缀，比如 display: flex 变成 -webkit-box 和 -webkit-flex，但 @media 本身不需要前缀——浏览器从很久以前就支持带条件的媒体查询，不需要加 -webkit- 这类前缀。

你看到输出和输入一样，其实是正常的。不信你写个 display: flex 在媒体查询里试试，编译后会发现 flex 那行加了前缀，但 @media 行不会变，因为压根不需要。

另外确认下你用的浏览器列表配置对不对，比如 browserslist 里要是包含老版本 Safari 或 Android Browser，autoprefixer 才会加前缀。如果配置太新（比如只写 last 2 versions），确实可能不加任何前缀，但媒体查询本身本来就不依赖这个。

附个典型配置示例：

module.exports = {

  plugins: {

    autoprefixer: {

      overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead']

    }

  }

}

性能上它也不耗资源，真要怀疑自己配置错了，先加个 display: flex 在普通规则里试试输出有没有前缀，能快速定位是不是媒体查询本身的问题。

2026-02-27 10:00