在Nuxt2的postcss-pxtorem 应该如何设置多个设计稿的宽度 和对应的基准值
时间: 2024-05-04 14:21:06 浏览: 13
可以使用 `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` 的值不进行转换。
相关问题
Nuxt2的postcss-pxtorem 应该如何设置多个设计稿的宽度 和对应的基准值
当需要支持不同设计稿的宽度时,可以使用`postcss-pxtorem`的`rootValue`选项来设置基准值。假设有两个设计稿,分别是750px和1080px,对应的基准值可以分别设置为75和108。
首先,安装`postcss-pxtorem`:
```
npm install postcss-pxtorem --save-dev
```
然后,在`nuxt.config.js`中配置`postcss-pxtorem`插件:
```javascript
module.exports = {
// ...
build: {
postcss: {
plugins: {
'postcss-pxtorem': {
rootValue({ file }) {
// 根据文件路径判断基准值
return file.indexOf('750') !== -1 ? 75 : 108;
},
propList: ['*']
}
}
}
}
}
```
在上面的示例中,使用`rootValue`函数来根据文件路径判断当前设计稿的宽度,并设置对应的基准值。`propList`选项用于指定需要转换的属性,默认为`['font-size']`,如果需要转换所有属性,则可以设置为`['*']`。
注意,当设置了`rootValue`选项时,`postcss-pxtorem`会将所有像素单位转换为相对于基准值的rem单位。例如,如果当前设计稿为750px,基准值为75,则一个10px的元素会被转换为0.1333rem(10 / 75)。
Nuxt2的postcss-pxtorem 应该如何设置多个设计稿的宽度
在使用 `postcss-pxtorem` 插件时,可以设置 `rootValue` 参数来指定基准值,也就是 1rem 对应的像素值。默认情况下,`rootValue` 为 `16`,即 1rem 对应 16px。
如果你需要适配多个设计稿的宽度,可以根据实际情况设置不同的 `rootValue` 值。具体做法如下:
1. 安装 `postcss-pxtorem` 插件:
```
npm install postcss-pxtorem --save-dev
```
2. 在 Nuxt2 项目的根目录中新建 `postcss.config.js` 文件,并配置 `postcss-pxtorem` 插件:
```js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 默认值为 16,即 1rem 对应 16px
propList: ['*'],
},
},
};
```
其中,`propList` 参数用于指定哪些 CSS 属性需要转换成 rem 单位,默认为 `['font-size']`,即只有 `font-size` 属性会被转换。我们可以将其设置为 `['*']`,表示将所有 CSS 属性都转换成 rem 单位。
3. 在需要适配的页面中,根据设计稿的宽度设置不同的 `rootValue` 值。例如,如果有两个设计稿分别为 750px 和 1080px,可以在对应的页面中设置 `rootValue` 值:
```html
<!-- 750px 设计稿 -->
<style scoped>
html {
font-size: calc(100vw / 7.5); /* 1vw = 1/100 of viewport width */
}
</style>
<!-- 1080px 设计稿 -->
<style scoped>
html {
font-size: calc(100vw / 10.8); /* 1vw = 1/100 of viewport width */
}
</style>
```
这样,根据不同的设计稿宽度,1rem 单位就会对应不同的像素值。例如,在 750px 设计稿中,1rem 单位对应的像素值为 50px(因为 `rootValue` 等于 `750 / 15 = 50`),在 1080px 设计稿中,1rem 单位对应的像素值为 80px(因为 `rootValue` 等于 `1080 / 13.5 = 80`)。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)