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

迷人的文阁提问于 2026-03-07 18:15:17 阅读 2

工具

我用 PostCSS 的 autoprefixer 插件处理 CSS，但写好的媒体查询在编译后完全没变化，也没报错，是不是我配置漏了啥？

我的 CSS 里写了类似这样的代码：@media (max-width: 768px) { ... }，但输出的 CSS 还是原样，连浏览器前缀都没加。

这是我的 postcss.config.js 配置：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

动画效果

我来解答赞 1 收藏

反馈

1 条解答

程序员玉霞 Lv1

这个问题其实挺常见的，主要是autoprefixer对媒体查询的处理方式问题。媒体查询本身不需要加前缀，但有些媒体特性可能需要，比如 @media (-webkit-min-device-pixel-ratio: 2) 这种。

先说解决方案：你的配置其实没问题，但得确认两件事：

1. 确保你的package.json里有browserslist配置，这个决定了autoprefixer要处理哪些浏览器。标准写法是在package.json里加：

"browserslist": [

  "> 1%",

  "last 2 versions"

]

2. 媒体查询的写法要符合标准，@media (max-width: 768px) 这种本来就不需要加前缀，所以输出原样是正常的。如果想测试autoprefixer是否正常工作，可以加个需要前缀的属性比如：

.test {

  display: flex;

}

如果flexbox也没加前缀，那才是配置出了问题。顺便吐槽下，postcss这玩意儿有时候不报错才是最烦的，建议先用简单CSS测试下插件是否真的在运行。

2026-03-07 18:23