postcss-pxtorem用法案例

postcss-pxtorem是一个PostCSS插件，用于将像素单位换为rem单位。它可以帮助开发者在移动端开发中更方便地处理不同屏幕尺寸的适配问题。

使用postcss-pxtorem的步骤如下：
1. 首先，安装postcss-pxtorem插件。可以使用npm或者yarn进行安装。
2. 在项目的根目录下创建一个postcss.config.js文件，并在其中配置postcss-pxtorem插件。例如：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 设计稿宽度除以10，例如设计稿宽度为375px，则rootValue为37.5
      propList: ['*'], // 需要转换的属性，这里设置为全部
    }),
  ],
};

3. 在项目的CSS文件中使用像素单位进行样式编写。例如：

.container {
  width: 375px;
  font-size: 14px;
}

4. 运行构建工具，例如webpack或者gulp，使postcss-pxtorem插件生效。插件会自动将像素单位转换为rem单位。例如：

.container {
  width: 23.4375rem; /* 375 / 16 = 23.4375 */
  font-size: 0.875rem; /* 14 / 16 = 0.875 */
}

这样，就可以实现根据设计稿宽度自动转换像素单位为rem单位，从而实现移动端适配。