postcss-pxtorem用法

postcss-pxtorem是一个PostCSS插件，用于将像素单位（px）转换为rem单位。rem单位是相对于根元素（通常是html元素）的字体大小而言的，可以实现页面的响应式布局。

使用postcss-pxtorem的步骤如下：

1. 首先，确保你的项目中已经安装了postcss和postcss-pxtorem插件。

2. 在你的项目根目录下创建一个postcss.config.js文件，并添加以下配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 根元素字体大小
      propList: ['*'], // 需要转换的属性，'*'表示所有属性都需要转换
      selectorBlackList: [], // 需要忽略的选择器，比如 'body' 表示不对body内的样式进行转换
      minPixelValue: 2 // 小于等于2px的样式不进行转换
    }
  }
};

3. 在你的CSS文件中使用像素单位（px）编写样式。例如：

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

4. 运行构建工具（如webpack），它会自动使用postcss-pxtorem将像素单位转换为rem单位。

5. 构建完成后，你会发现样式中的像素单位已经被转换为rem单位，例如：

.selector {
  font-size: 1rem; /* 16px / 16 = 1rem */
  margin: 0.625rem; /* 10px / 16 = 0.625rem */
}

通过使用postcss-pxtorem，你可以实现页面样式的自适应，确保在不同屏幕大小和设备上都能良好展示。