在Nuxt2的postcss-pxtorem 应该如何设置多个设计稿的宽度 和对应的基准值
时间: 2024-05-11 07:19:19 浏览: 11
在 Nuxt2 中使用 `postcss-pxtorem` 实现自适应布局,可以通过设置多个 `rootValue` 来实现对不同设计稿的适配。
具体操作如下:
1. 安装 `postcss-pxtorem` 依赖包:
```
npm install postcss-pxtorem --save-dev
```
2. 在 Nuxt2 项目的根目录下创建 `postcss.config.js` 文件,并添加以下代码:
```javascript
const createPx2rem = (rootValue) => {
return {
loader: "postcss-loader",
options: {
plugins: [
require("postcss-pxtorem")({
rootValue,
propList: ["*"],
selectorBlackList: ["html"],
minPixelValue: 2,
}),
],
},
};
};
const config = {
plugins: [
createPx2rem(37.5), // 对应设计稿宽度为 375px
createPx2rem(42), // 对应设计稿宽度为 414px
],
};
module.exports = config;
```
上述代码中,我们创建了一个 `createPx2rem` 函数,用来生成 `postcss-loader` 的配置。该函数接受一个参数 `rootValue`,表示该设计稿下 1rem 对应的像素值。我们通过调用该函数两次,分别传入不同的 `rootValue` 值,来实现对两个不同设计稿的适配。
在配置文件中,我们通过 `plugins` 属性来定义 `postcss-loader` 的配置数组,其中包含两个元素,分别是传入不同 `rootValue` 值的 `createPx2rem` 函数。
3. 修改 `nuxt.config.js` 配置文件,添加 `build.postcss` 属性,指向 `postcss.config.js` 文件:
```javascript
export default {
// ...
build: {
postcss: require("./postcss.config.js"),
},
// ...
};
```
这样就完成了在 Nuxt2 中使用 `postcss-pxtorem` 适配多个设计稿的操作。需要注意的是,在写样式时,需要使用 `rem` 单位代替 `px`,并根据不同设计稿的 `rootValue` 值来计算对应的 `rem` 值。例如,在 375px 设计稿下,声明一个宽度为 100px 的样式,可以写成:
```css
.example {
width: 2.66667rem; /* 100 / 37.5 */
}
```