Autoprefixer根据browserslist配置自动添加必要浏览器前缀，基于Can I Use数据判断兼容性，无需手动编写前缀，结合构建工具使用，提升开发效率。
Autoprefixer 是一个基于 PostCSS 的 CSS 工具，它能自动为你的 CSS 规则添加浏览器厂商前缀（如 -webkit-、-moz-、-ms- 等），帮助你兼容不同版本的浏览器，而无需手动查找哪些属性需要前缀。
工作原理：基于 Can I Use 数据库
Autoprefixer 不是盲目地给所有属性加前缀，而是根据当前主流浏览器的市场占有率和对 CSS 特性的支持情况，从 Can I Use 数据库中获取信息，只在必要时添加前缀。
例如，你写：
.example {transform: rotate(45deg);
}
Autoprefixer 可能会输出：
立即学习“前端免费学习笔记（深入）”；
.example {-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
这取决于你指定的目标浏览器范围。
如何配置目标浏览器
你可以通过 package.json 中的 browserslist 字段来定义你需要兼容的浏览器范围，Autoprefixer 会据此决定是否添加前缀。
示例配置：
"browserslist": ["> 1%",
"last 2 versions",
"not ie <= 10"
]
含义是：覆盖全球使用率大于 1% 的浏览器，主流浏览器最近两个版本，排除 IE 10 及以下版本。
常见选项包括：
- > 1%：市场份额超过 1%
- last 2 versions：每个浏览器最近两个版本
- Firefox > 60：Firefox 60 以上版本
- not dead：排除已停止维护的浏览器
集成到构建工具中
Autoprefixer 通常与构建工具结合使用，比如 Webpack、Vite、Gulp 或 PostCSS CLI。
以 PostCSS 配置为例（postcss.config.js）：
module.exports = {plugins: [
require('autoprefixer')
]
}
如果你使用 Webpack，确保 css-loader 和 postcss-loader 正确配置，并启用 PostCSS 插件。
现代前端框架如 Create React App、Vue CLI 等已经内置 Autoprefixer，你只需配置 browserslist 即可生效。
不需要再手动写前缀
使用 Autoprefixer 后，你应该直接书写标准的 CSS 语法，无需添加任何厂商前缀。
错误做法：
.box {-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
正确做法：
.box {border-radius: 8px;
}
让 Autoprefixer 自动处理兼容性问题。
基本上就这些。配置一次 browserslist，Autoprefixer 就能帮你搞定大部分 CSS 前缀兼容问题，省时又可靠。
