autoprefixer插件保存后无反应，根本原因是未正确配置postcss.config.js、browserslist及vscode的editor.codeactionsonsave，且插件仅对.css/.postcss文件默认生效，.scss/.vue需额外配置。
VSCode 本身不自动加 -webkit- 这类前缀，必须靠外部工具链驱动；直接装个插件点几下是没用的，关键在配置是否生效、是否被真正调用。
Autoprefixer 插件为什么保存后没反应
常见现象：装了 Autoprefixer 扩展，写了 display: flex，保存后还是原样——根本没触发补全。原因不是插件坏了，而是它没被激活：
- VSCode 默认不监听 CSS 文件保存事件来跑 Autoprefixer，需手动开启
editor.codeActionsOnSave配置 - 插件只对
.css和.postcss文件生效，.scss或.vue里的<style></style>需额外配置语言服务 - 若项目根目录没
browserslist或postcss.config.js，插件会静默跳过，不报错也不处理
三种能真正生效的配置路径
不是所有“自动加前缀”方案都等价，选错路径会导致兼容性漏掉或构建失败：
-
PostCSS + autoprefixer（推荐）：在
postcss.config.js中配置require('autoprefixer')，配合构建工具（如 Vite/Webpack）或 VSCode 的codeActionsOnSave触发。支持 IE11，可精确控制目标浏览器 -
VSCode 独立插件（轻量场景）：装
Autoprefixer（mrmlnc 版），在.vscode/settings.json加"autoprefixer.browsers"。适合单文件调试，但大文件卡顿明显 -
Tailwind JIT 模式（仅限 Tailwind 项目）：无需额外配置，
tailwind.config.js启用mode: 'jit'后，所有生成类名已含必要前缀。不处理手写 CSS，也不支持 IE
哪些属性其实不用加前缀，但你可能还在加
盲目加前缀反而增加体积、干扰调试。Autoprefixer 不是“见属性就加”，它查的是 Can I Use 数据库，当前（2026 年）以下情况基本不用手动干预：
-
display: flex/grid：Chrome 29+/Firefox 28+ 已原生支持，仅旧版 IE 需-ms- -
transform：Safari 3.1+/Chrome 4+ 原生，-webkit-仅对 Safari -
user-select：Firefox 68+、Chrome 76+、Safari 15.4+ 全原生，-moz-和-webkit-已成冗余 -
gap（flex/grid）：现代浏览器全覆盖，旧版 Chrome/Firefox 用-webkit-补丁已失效，Autoprefixer 默认不加
最容易被忽略的兼容性断点
很多人配了 "last 2 versions" 就以为万事大吉，但实际部署时经常翻车：
- Android Browser 4.4（系统 WebView）仍广泛存在于企业内网设备，
flex必须加-webkit-，但默认browserslist不包含它 - 某些国产浏览器（如 QQ 浏览器 X5 内核）伪装成 Chrome，却只实现部分
-webkit-属性，需单独测试transition和filter -
@supports查询不能替代前缀：写了@supports (display: grid)，不代表里面用的gap就自动有前缀，Autoprefixer 不解析条件规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
