postcss-px-to-viewport如何使用

postcss-px-to-viewport 是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位，以适应不同屏幕尺寸的需求。

使用方法如下：

1. 安装 postcss-px-to-viewport 插件：

npm install 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. 在项目的 package.json 文件中添加 postcss 配置：

{
  "name": "my-project",
  "version": "1.0.0",
  "postcss": {
    "plugins": {
      "postcss-px-to-viewport": {}
    }
  }
}

4. 使用插件，将 CSS 中的 px 单位转换为 vw 或 vh 单位：

// before
.box {
  width: 100px;
  height: 100px;
  font-size: 14px;
}

// after
.box {
  width: 13.333vw;
  height: 13.333vw;
  font-size: 1.867vw;
}

以上就是使用 postcss-px-to-viewport 插件的基本方法。可以根据实际项目需求，调整配置参数以达到最佳效果。