配置postcss-pxtorem

的相关参数时，如何根据设计图的宽度动态设置 remUnit 的值？

可以通过 postcss-pxtorem 的 options 配置项中使用一个函数来动态设置 remUnit 的值，如下所示：

const unit = 100; // 设计图宽度为 750px，假设 1rem 代表 100px
module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: ({ file }) => {
        // 获取当前文件所在目录相对于项目根目录的路径
        const filePath = file.dirname.split(path.sep).slice(1).join('/');
        // 如果是针对某个特定的 UI 组件进行开发
        // 可以根据组件所在的目录结构动态设置 remUnit 值
        if (filePath.startsWith('src/components/my-component')) {
          return 50; // 1rem 代表 50px
        }
        return unit; // 1rem 代表 100px
      }
    })
  ]
};

在这个例子中，我们将配置的默认单位值设为 100px，代表 1rem 等于 100px。然后，我们通过一个函数来动态计算 remUnit：

- 首先，获取当前样式文件所在目录相对于项目根目录的路径。
- 然后，判断这个路径是否以 `src/components/my-component` 开头，如果是，就将 remUnit 值设为 50px，否则就保持默认值。
- 最后，返回计算出的 remUnit 值即可。

这样，我们就可以根据设计图的宽度动态设置 remUnit 的值，实现 rem 适配方案的自适应。