postcss-px-to-viewport怎么自己配置转化比例
时间: 2023-10-07 16:09:22 浏览: 63
前端开源库-postcss-px-to-viewport
可以在使用`postcss-px-to-viewport`插件时,通过传入一个选项对象来指定转化比例。具体的配置如下:
```javascript
{
"postcss-px-to-viewport": {
viewportWidth: 750, // 视窗的宽度
viewportHeight: 1334, // 视窗的高度
unitPrecision: 3, // 转换后的精度,即小数点位数
viewportUnit: 'vw', // 转换后的单位
selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名
minPixelValue: 1, // 小于等于1px不转换
mediaQuery: false, // 允许在媒体查询中转换px
exclude: /(\/|\\)(node_modules)(\/|\\)/ // 忽略node_modules目录下的文件
}
}
```
其中`viewportWidth`和`viewportHeight`分别表示视窗的宽度和高度,可以根据自己的需求进行配置。`unitPrecision`表示转换后的精度,一般设置为3即可,`viewportUnit`表示转换后的单位,可以选择`vw`、`vh`等。`selectorBlackList`表示不需要转换的类名,可以添加一些类名,比如`.ignore`、`.hairlines`等。`minPixelValue`表示小于等于1px不转换,`mediaQuery`表示是否允许在媒体查询中转换px。最后,`exclude`表示忽略node_modules目录下的文件,可以提高编译速度。
以上是一些常用的配置,你可以根据自己的需求进行调整。
阅读全文