1920 * 1080的设计稿想通过postcss-px-to-viewport实现自适应

1. 首先安装postcss-px-to-viewport插件，命令如下：

npm install postcss-px-to-viewport --save-dev

2. 在项目根目录下创建.postcssrc.js文件，并在该文件中添加以下代码：

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
"postcss-px-to-viewport": {
viewportWidth: 1920, // 设计稿宽度
viewportHeight: 1080, // 设计稿高度
unitPrecision: 5, // 转换后的精度
viewportUnit: 'vw', // 转换后的单位
selectorBlackList: ['.ignore', '.hairlines'], // 不被转换的class名称
minPixelValue: 1, // 小于或等于1px不进行转换
mediaQuery: false // 是否允许在媒体查询中转换
}
}
}

3. 在webpack配置文件中添加postcss-loader，代码如下：

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
}
]
}
}

4. 在样式文件中使用px单位进行设计稿的布局，插件会自动将其转换为vw单位，例如：

.container {
width: 200px; // 设计稿中的尺寸
height: 300px;
margin-top: 20px;
font-size: 16px;
}

转换后的样式为：

.container {
width: 10.41667vw; // 转换后的尺寸
height: 15.625vw;
margin-top: 1.04167vw;
font-size: 0.83333vw;
}

这样就可以实现1920 * 1080的设计稿自适应了。