postcss-px-to-viewport怎么用

postcss-px-to-viewport是一种将px转换为viewport单位（vw、vh、vmin、vmax）的CSS后置处理器。使用postcss-px-to-viewport需要进行以下步骤：

1. 安装postcss-px-to-viewport，可以使用npm或yarn进行安装，命令如下：

   npm install postcss-px-to-viewport --save-dev
   yarn add -D postcss-px-to-viewport

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 // 是否在媒体查询中转换
       }
     }
   }

具体参数含义如下：

- viewportWidth：设计稿宽度，必填项。
- viewportHeight：设计稿高度，可以不指定，默认为1334。
- unitPrecision：转换后保留的小数位数，默认为3。
- viewportUnit：转换后的单位，默认为vw。
- selectorBlackList：不进行转换的类名，可以是字符串或正则表达式，默认为空数组。
- minPixelValue：小于等于1px的不进行转换，默认为1。
- mediaQuery：是否在媒体查询中转换，默认为false。

3. 在项目中使用postcss-loader进行处理，示例代码如下：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             'style-loader',
             'css-loader',
             {
               loader: 'postcss-loader',
               options: {
                 ident: 'postcss',
                 plugins: [
                   require('postcss-px-to-viewport')()
                 ]
               }
             }
           ]
         }
       ]
     }
   }

注意：使用postcss-loader需要安装postcss-loader和autoprefixer两个依赖。

以上就是postcss-px-to-viewport的使用方法，希望能对你有所帮助。