PostCSS 插件的使用

最近项目中使用了postcss-px-to-viewport、postcss-pxtorem，都是非常方便的工具。为了方便后续的复习，在这里记录一下，也感谢大家可以帮我指出错误哈哈

postcss-px-to-viewport

postcss-px-to-viewport 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为视口单位（vw、vh 等）。这个插件主要用于响应式设计，使网页在不同设备和屏幕尺寸上具有更好的适应性。

以下是 postcss-px-to-viewport 的一些主要功能和特点：

1. 自动转换 px 到视口单位：它会根据配置规则，将 CSS 文件中的所有 px 单位转换为指定的视口单位。
2. 自定义视口宽度和高度：可以通过配置项设定设计稿的视口宽度和高度，从而确定转换的基准。
3. 灵活的配置：允许指定哪些文件需要转换，哪些选择器应该忽略转换，以及精度控制等。
4. 多重适配方案支持：支持常见设计稿如 750px 和 375px 的设计，并且可以根据业务需求进行调整。

示例用法

首先，你需要安装 postcss-px-to-viewport：

npm install postcss-px-to-viewport --save-dev

然后，在你的 PostCSS 配置文件（通常是 postcss.config.js）中进行配置。例如：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,  // 视口的宽度，对应的是我们设计稿的宽度
      viewportHeight: 667, // 视口的高度，对应的是我们设计稿的高度 (可选)
      unitPrecision: 5,    // 指定`px`转换为视窗单位值的小数位数
                           //（很多时候无法整除）
      viewportUnit: 'vw',  // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，
                           // 可以自定义，可以无限添加，建议定义一至两个通用的类名
      minPixelValue: 1,    // 小于或等于`1px`不转换为视窗单位
      mediaQuery: false    // 允许在媒体查询中转换`px`
    }
  }
}

这样配置好后，当你编写 CSS 时，例如：

/* input */
.container {
  width: 750px;
  height: 1334px;
}

/* output after processed by postcss-px-to-viewport */
.container {
  width: 100vw;
  height: 177.94vw;
}

postcss-pxtorem

postcss-pxtorem 是一个用于将 CSS 文件中的像素（px）单位自动转换为 rem 单位的 PostCSS 插件。REM（Root Em）是一种相对单位，相对于根元素（通常是 HTML 元素）的字体大小进行计算。这在响应式设计中非常有用，因为使用 REM 单位可以使布局更容易缩放和调整。

以下是 postcss-pxtorem 的一些主要用途：

1. 响应式设计：通过将像素转换为 REM，开发者可以更方便地创建具有响应性的设计。只需更改根元素的字体大小，即可整体调整页面比例。

2. 简化样式维护：采用 REM 可以减少不同视口尺寸下需要调整的样式规则数量，从而简化代码维护工作。

3. 提高可读性：使用相对单位如 REM，可以使得样式代码更具语义性和可读性。

安装

npm install postcss-pxtorem --save-dev

配置

安装好插件后，需要在 PostCSS 配置文件（例如 postcss.config.js）中进行配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 根元素字体大小
      unitPrecision: 5, // 允许REM单位增长到的小数点位数
      propList: ['*'], // 适用哪些属性
      selectorBlackList: [], // 忽略的选择器
      replace: true, // 替换包含REM的规则，而不是添加回落
      mediaQuery: false, // 允许在媒体查询中转换px
      minPixelValue: 0 // 设置要替换的最小像素值
    }
  }
}

假设你有如下 CSS 代码：

body {
  font-size: 32px;
  margin: 0 10px;
}

/* 经过 postcss-pxtorem 转换后，会变成： */
body {
  font-size: 2rem;
  margin: 0 0.625rem;
}