postcsspxtoviewport根据不同属性转vw和vh

PostCSS 插件 postcss-px-to-viewport 可以帮助你将 CSS 中的 px 单位转换成 vw 和 vh 单位。以下是如何使用该插件的示例代码：

首先，安装 postcss-px-to-viewport：

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

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

// postcss.config.js
 
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转换的单位
      viewportWidth: 750, // 设计稿宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 指定转换那些属性，* 表示全部
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 过滤掉那些不进行转换的CSS选择器
      minPixelValue: 1, // 小于或等于`1px`不转换
      mediaQuery: false, // 是否在媒体查询中也转换`px`
      replace: true, // 是否直接更换原来的单位
      exclude: [/node_modules/], // 忽略那些文件
      landscape: false // 是否添加landscape视口宽度
    }
  }
};

在你的 CSS 文件中，你可以这样写：

/* input */
.element {
  width: 375px;
  height: 200px;
  font-size: 14px;
}

postcss-px-to-viewport 会转换成：

/* output */
.element {
  width: 100vw;
  height: 13.33333vw;
  font-size: 4.26667vw;
}

这样，你的样式表就会根据设计稿的宽度自动转换成对应的 vw 和 vh 单位。