Autoprefixer通过PostCSS自动为CSS添加厂商前缀，需安装autoprefixer和postcss，配置browserslist指定目标浏览器，并在Webpack、Gulp等构建工具中集成，编写标准CSS后由工具自动补全兼容性前缀。
Autoprefixer 是一个基于浏览器使用率数据，自动为 CSS 规则添加厂商前缀的工具。它不直接作为 CSS 属性书写方式存在，而是通过构建工具（如 Webpack、Gulp、PostCSS 等）在开发流程中处理你的 CSS 文件。
1. 安装 Autoprefixer 和 PostCSS
Autoprefixer 依赖于 PostCSS，所以需要先安装这两个包：
npm install --save-dev autoprefixer postcss如果你使用的是构建工具，比如 Webpack，可能还需要安装 postcss-loader：
2. 配置 browserslist（指定目标浏览器）
Autoprefixer 根据你支持的浏览器范围决定是否添加前缀。推荐在 package.json 中添加 browserslist 字段：
这表示：支持每个浏览器最近两个版本、全球使用率超过1%的浏览器，且非已废弃的浏览器。
3. 在构建工具中使用 Autoprefixer
以下是几种常见方式：
Webpack 配置示例（postcss-loader + autoprefixer）： module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}
]
}
]
}
Gulp 示例：
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
gulp.task('css', () => {
return gulp.src('src/*.css')
.pipe(postcss([ autoprefixer ]))
.pipe(gulp.dest('dist'));
});
独立 PostCSS 配置（postcss.config.js）：
module.exports = {
plugins: [
require('autoprefixer')
]
}
4. 编写标准 CSS，无需手动加前缀
你只需写现代标准的 CSS，Autoprefixer 会自动处理兼容性。例如：
.example { display: flex; transition: all 0.3s; user-select: none; }Autoprefixer 可能输出：
.example { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }基本上就这些。只要配置好构建流程和浏览器目标，Autoprefixer 就会在打包时自动为你补全兼容性前缀，无需手动维护。
