移动端REM适配 postcss-pxtorem怎么配置

在移动端进行REM适配可以使用PostCSS插件postcss-pxtorem来自动转换像素单位为REM单位。面是配置postcss-pxtorem的骤：

1. 首先，确保你已在项目中安装了postcss和postcsspxtorem插件。

2. 在项目根目录下创建一个postcss.config.js文件，并在该文件中进行配置。

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 根据设计稿的实际尺寸设置
      unitPrecision: 5, // 转换后的REM值保留的小数位数
      propList: ['*'], // 需要转换的CSS属性，默认为全部
      selectorBlackList: [], // 需要忽略的CSS选择器，例如['.ignore']，可以使用正则表达式
      replace: true, // 是否替换原有的CSS规则
      mediaQuery: false, // 是否将媒体查询中的像素单位也转换为REM单位
      minPixelValue: 0 // 小于该数值的像素单位不转换
    }
  }
}

上述配置中，rootValue代表根元素（html）的字体大小，一般与设计稿的实际尺寸对应。unitPrecision用于设置转换后的REM值保留的小数位数。propList是一个数组，用于指定需要转换的CSS属性，默认为全部。selectorBlackList用于指定需要忽略的CSS选择器，可以使用正则表达式。replace用于设置是否替换原有的CSS规则。mediaQuery用于指定是否将媒体查询中的像素单位也转换为REM单位。minPixelValue用于设置小于该数值的像素单位不转换。

3. 在项目的postcss.config.js文件中添加配置后，你可以在构建工具（例如Webpack）的配置文件中使用postcss-loader加载并应用PostCSS插件。

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

以上配置中，使用了style-loader、css-loader和postcss-loader来处理CSS文件。具体的配置方式可能会因你所使用的构建工具而有所不同，请根据实际情况进行相应的调整。

总之，通过配置postcss-pxtorem插件，你可以实现移动端REM适配，使得页面在不同设备上展示更加统一和适配。