postcss-pxtorem移动端适配

对于移动端适配，postcss-pxtorem是一个很好的工具。它可以帮助我们将设计稿中的像素单位转换为rem单位，实现移动端的自适应布局。

首先，你需要在项目中安装postcss-pxtorem插件。可以使用npm或者yarn来进行安装：

npm install postcss-pxtorem --save-dev

然后，在项目的根目录下创建一个postcss.config.js文件，并配置postcss-pxtorem插件：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿宽度除以10，比如设计稿宽度是375px，则rootValue为37.5
      propList: ['*'],
      selectorBlackList: ['html'], // 不转换html元素的rem单位
    },
  },
};

接下来，在你的css文件中使用像素单位进行编写，插件会自动将其转换为rem单位。例如：

.selector {
  font-size: 14px;
  margin: 10px;
}

最后，在构建工具中配置postcss-loader来应用postcss插件，比如在webpack中的配置：

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

这样就完成了移动端适配的配置。当页面加载时，插件会根据设备的宽度计算出rem单位的值，并将样式应用到对应的元素上，实现移动端自适应布局。