postcss-px-to-viewport怎么根据浏览器来自己写方法来设置px转换vw的比例
时间: 2023-10-13 17:09:41 浏览: 29
可以使用 `window.innerWidth` 来获取浏览器窗口宽度,然后根据不同的宽度设置不同的 `vw` 比例。
具体实现可以参考以下代码:
```javascript
const viewportWidth = window.innerWidth;
let pxToVwRatio = 1;
if (viewportWidth > 1920) {
pxToVwRatio = 0.5;
} else if (viewportWidth > 1440) {
pxToVwRatio = 0.6;
} else if (viewportWidth > 1024) {
pxToVwRatio = 0.8;
} else {
pxToVwRatio = 1;
}
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 750,
viewportUnit: 'vw',
minPixelValue: 1,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568,
exclude: [],
// 自定义转换比例
transform(px) {
return `${px / pxToVwRatio}vw`;
},
}),
],
};
```
在上面的代码中,我们首先通过 `window.innerWidth` 获取浏览器窗口宽度,然后根据不同的宽度设置不同的 `vw` 比例。接着,在 `postcss-px-to-viewport` 插件的配置选项中,我们使用 `transform` 属性来自定义转换比例,返回值即为转换后的值。
需要注意的是,在使用 `transform` 自定义转换比例时,插件中的其他配置选项仍然有效,如 `minPixelValue`、`propList` 等。