postcss-pxtorem pc

postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位。rem 单位是基于根元素（html 标签）的字体大小来计算的，这样可以实现响应式设计，使网页在不同设备上自适应。

以下是 postcss-pxtorem 的主要特点和用法：

1. **安装**：
首先，你需要安装 postcss 和 postcss-pxtorem。可以使用 npm 或 yarn 进行安装：

   npm install postcss postcss-pxtorem --save-dev

或

   yarn add postcss postcss-pxtorem --dev

2. **配置**：
在你的项目中创建一个 `postcss.config.js` 文件，并进行如下配置：

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 16, // 根元素字体大小
         propList: ['*'], // 需要转换的属性列表
         selectorBlackList: [], // 不需要转换的选择器列表
         mediaQuery: false, // 是否转换媒体查询中的 px
       }
     }
   }

3. **使用**：
在你的 CSS 文件中使用 px 单位，postcss-pxtorem 会自动将其转换为 rem 单位。例如：

   .container {
     width: 320px;
     height: 160px;
   }

转换后：

   .container {
     width: 20rem;
     height: 10rem;
   }

4. **注意事项**：
- 确保你的项目中已经引入了 postcss。
- 根据设计稿的根元素字体大小调整 `rootValue`。
- 使用 `selectorBlackList` 可以排除不需要转换的选择器。

通过使用 postcss-pxtorem，你可以更方便地实现响应式设计，确保网页在不同设备上显示效果一致。