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` 插件：

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` 值：

<!-- 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`）。