postcss-pxtorem 自动转换

postcss-pxtorem是一个PostCSS插件，用于将像素单位（px）转换为rem单位。它可以帮助开发人员在开发响应式网站时更方便地处理不同屏幕尺寸下的样式。

下面是一个使用postcss-pxtorem自动转换的示例：

1. 首先，确保你已经安装了postcss和postcss-pxtorem插件。你可以使用以下命令进行安装：

npm install postcss postcss-pxtorem --save-dev

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

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 基准值，即1rem等于多少px
      propList: ['*'], // 需要转换的属性，默认为全部
    }),
  ],
};

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

.container {
  width: 320px;
  font-size: 14px;
  margin-bottom: 20px;
}

4. 运行postcss命令，将px转换为rem。你可以使用以下命令：

npx postcss input.css -o output.css

5. 查看转换后的CSS文件，你会发现像素单位已经被转换为rem单位，例如：

.container {
  width: 20rem;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

这样，你就成功地使用postcss-pxtorem自动将像素单位转换为rem单位了。