怎么用postcss-px2rem做移动端适配

PostCSS-px2rem是一个PostCSS插件，可以将CSS中的像素值转换为rem值，以实现移动端适配。

以下是使用步骤：

1. 安装`postcss-px2rem`插件

npm install postcss-px2rem --save-dev

2. 在项目根目录下创建`postcss.config.js`文件

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 75 // 设计稿宽度/10
    }
  }
}

其中，`remUnit`是设计稿宽度除以10的值，这个值可以根据实际情况进行调整。

3. 在`webpack.config.js`或`vue.config.js`中引入`postcss-loader`并加入配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                config: './postcss.config.js'
              }
            }
          }
        ]
      }
    ]
  }
}

4. 在CSS中使用像素值

.container {
  width: 750px; /* 设计稿宽度 */
  font-size: 28px; /* 除了长度单位外，其他样式仍然使用像素值 */
}

经过转换后，CSS将变为：

.container {
  width: 10rem;
  font-size: 0.37333333rem;
}

这样，就实现了移动端适配。当页面宽度发生变化时，rem值也会相应地进行调整，从而实现适配效果。