postcss-px2vw插件将px转vw、rem

postcss-px2vw 插件可以帮助我们将 CSS 中的像素单位（px）转换为视口宽度单位（vw）或者根据设计稿尺寸转换为 rem 单位。以下是如何使用该插件的示例代码：

首先，安装 postcss-px2vw 插件：

npm install postcss-px2vw --save-dev

然后，在你的 PostCSS 配置文件中引入并使用这个插件：

// postcss.config.js
 
module.exports = {
  plugins: [
    require('postcss-px2vw')({
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 750, // 设计稿的宽度
      unitPrecision: 5, // 单位精度
      propList: ['*'], // 指定转换哪些属性，['*'] 表示转换所有属性
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewport: 750, // 根字体大小相对于视口宽度的百分比，用于 rem 转换
      minPixelValue: 1, // 不转换小于这个值的属性
      mediaQuery: false, // 是否在媒体查询中也转换 px
      replace: true // 是否直接更换原属性
    })
  ]
};

在你的 CSS 文件中，使用像素单位（px）：

/* input.css */
 
body {
  font-size: 16px;
  margin: 20px;
  padding: 10px;
  width: 100px;
}

在经过 PostCSS 处理后，你的 CSS 文件将会被转换为使用 vw 或 rem 单位：

/* output.css */
 
body {
  font-size: 1.6rem;
  margin: 2.0vw;
  padding: 1.0rem;
  width: 10.0rem;
}

这样，你就可以根据设计稿的宽度和目标视口宽度来自动转换你的样式单位了。