vite+vue3 项目 想通过postcss-px-to-viewport实现1920 * 1080的设计稿的屏幕自适应
时间: 2024-01-21 10:40:38 浏览: 28
步骤如下:
1. 安装依赖
```
npm install postcss-px-to-viewport --save-dev
```
2. 修改项目中的 postcss.config.js 文件
```
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 1920,
viewportHeight: 1080,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568,
},
},
};
```
3. 在需要进行 px 转换的样式文件中引入 postcss-px-to-viewport
```
@import "~postcss-px-to-viewport";
```
4. 在样式文件中使用 px 单位,会自动转换为 vw 单位
```
div {
width: 100px;
height: 50px;
}
```
转换后的样式:
```
div {
width: 5.20833vw;
height: 2.60417vw;
}
```
5. 在 index.html 文件中添加 viewport meta 标签
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
```
这样就可以实现屏幕自适应了。