在Nuxt2的postcss-pxtorem 应该如何设置多个设计稿的宽度 和对应的基准值
时间: 2024-05-04 15:21:06 浏览: 78
google-analytics-module:Google Analytics(分析)模块
可以使用 `postcss-pxtorem` 的 `rootValue` 选项来设置基准值,进而通过设置不同的 `rootValue` 来适应不同的设计稿宽度。以下是一个示例配置:
```js
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 375 / 10
propList: ['*'],
},
'postcss-pxtorem': {
rootValue: 50, // 750 / 15
propList: ['*'],
mediaQuery: false,
minPixelValue: 2,
},
},
};
```
这里我们定义了两个插件对象,分别配置了不同的 `rootValue` 来适应不同的设计稿宽度。需要注意的是,这里的 `propList` 设置为 `['*']`,表示所有属性都进行转换;`mediaQuery` 设置为 `false`,表示不处理媒体查询中的属性值;`minPixelValue` 设置为 `2`,表示小于等于 `2px` 的值不进行转换。
阅读全文