Autoprefixer 可自动为 CSS 添加浏览器前缀，避免手动出错；需配合构建工具使用，依赖 browserslist 配置目标环境，并需真机验证效果。
用 Autoprefixer 就能省掉手动加浏览器前缀的麻烦，它会根据你设定的目标浏览器范围，自动为 CSS 属性添加必要的 -webkit-、-moz-、-ms- 等前缀。
为什么手动加前缀容易出错
不同属性在不同浏览器、不同版本中需要的前缀不一样。比如 flex 在 Safari 8 需要 -webkit-，IE 10 要 -ms-，而 Chrome 29+ 已经完全不需要；transform 在老 Android 浏览器里必须带 -webkit-，但漏掉可能直接不生效。靠记忆或查表补全，既耗时又容易遗漏或加错。
Autoprefixer 怎么快速接入
它本身不单独运行，需配合构建工具使用：
- Webpack：装 autoprefixer 和 postcss-loader，在 postcss.config.js 里配置 plugins 并传入 browserslist 选项
- Vite / Vue CLI / Create React App：默认已集成，只需在 package.json 或 .browserslistrc 中声明目标环境（如 "> 1%, last 2 versions, not dead"）
- 命令行临时处理：装 postcss-cli + autoprefixer，运行 npx postcss input.css -o output.css --use autoprefixer
关键配置别忽略
Autoprefixer 的效果高度依赖 browserslist 配置：
立即学习“前端免费学习笔记（深入）”；
- 写在 .browserslistrc 文件里最清晰，例如：
> 0.5%
last 2 versions
not dead
IE 11 - 避免写死具体版本号（如 Chrome 45），优先用市场占比或版本跨度描述
- 执行 npx browserslist 可实时查看当前配置覆盖了哪些浏览器版本
补全后记得验证效果
生成后的 CSS 不是“一定正确”，仍需检查：
- 打开浏览器开发者工具，看样式面板里是否出现预期前缀（比如 display: -webkit-flex）
- 在目标低版本浏览器（如 iOS 9 Safari、Android 4.4 WebView）中真机测试关键交互
- 留意 Autoprefixer 不处理的场景：CSS 自定义属性（var()）、部分新语法（:has()、container queries）需自行判断兼容性
