postcss-px-to-viewport 怎样使用

A：postcss-px-to-viewport 是一个 PostCSS 插件，用于将 px 单位转换为视口单位（如 vw 和 vh）。

使用 postcss-px-to-viewport 的步骤如下：

1. 首先，确保你已经安装了 postcss 和 postcss-px-to-viewport：

npm install postcss postcss-px-to-viewport --save-dev

2. 在项目的根目录下创建 postcss.config.js 文件，并添加如下内容：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      viewportHeight: 1334, // 设计稿高度，可以不指定
      unitPrecision: 3, // 转换后的小数点位数
      viewportUnit: 'vw', // 转换后的单位
      selectorBlackList: ['.ignore', '.hairlines'], // 不需要转换的类名或者选择器
      minPixelValue: 1, // 小于等于 1px 不进行转换
      mediaQuery: false // 是否允许在媒体查询中转换
    }
  }
}

3. 在 CSS 文件中引入 postcss：

@import 'postcss';

4. 设置 CSS 根元素的字体大小。在项目入口文件中（如 App.vue 或 index.js）中添加如下代码：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'

解释：

- 1vw = viewportWidth 的 1/100
- 将设计稿宽度设置为 750，就可以将 px 转换为 vw，比如设计稿中一个元素宽度是 150px，在页面中宽度就变成了 20vw。
- 通常设计稿中的字体大小为 750 * 2 / 100，即 15px，可以根据需要进行调整。
- 将 CSS 根元素的字体大小设置为页面宽度的 1/7.5（即 100 / 7.5），可以让 px 转换为 rem，比如设计稿中一个元素宽度是 150px，在页面中宽度就变成了 2rem。

以上就是 postcss-px-to-viewport 的基本使用方法。在使用过程中，可能会出现一些问题，比如某些样式没有被转换、转换后的样式不正确等等，可以参考官方文档或者在社区中提问。