用 postcss-px-to-viewport 轻松搞定移动端布局

移动端开发中，布局一直是个绕不过的坎。早些年，我们用 rem 来适配，但后来发现 lib-flexible 有一些问题，于是转而使用 viewport。今天，我们来聊聊如何使用 postcss-px-to-viewport 来简化移动端布局。

什么是 postcss-px-to-viewport？

postcss-px-to-viewport 是一个 PostCSS 插件，它可以将 CSS 中的 px 单位转换为 vw、vh 或 rem 单位，从而实现移动端布局的响应式。

为什么使用 postcss-px-to-viewport？

使用 postcss-px-to-viewport 有以下好处：

• 简化移动端布局：只需编写一套 CSS 代码，即可适配所有屏幕尺寸。
• 提高性能：通过将 px 转换为 vw、vh 或 rem，可以减少浏览器重绘的次数，从而提高性能。
• 增强可读性：使用 vw、vh 或 rem 单位可以让 CSS 代码更具可读性和可维护性。

如何使用 postcss-px-to-viewport？

安装 postcss-px-to-viewport：

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

在 postcss.config.js 文件中配置插件：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 375, // 设计稿宽度
      viewportHeight: 667, // 设计稿高度
      unitPrecision: 5, // 转换精度，即保留几位小数
      viewportUnit: 'vw', // 转换后的单位，可选 vw, vh, rem
      selectorBlackList: [], // 不转换的类名
      minPixelValue: 1, // 小于此值的 px 单位不转换
      mediaQuery: false, // 媒体查询转换，可选
    }),
  ],
};

实例

使用 postcss-px-to-viewport 转换 px 单位为 vw 单位：

body {
  font-size: 14px;
  margin: 10px;
}

转换后：

body {
  font-size: 3.73vw;
  margin: 2.67vw;
}

注意事项

使用 postcss-px-to-viewport 时，需要注意以下几点：

• 设计稿尺寸：转换前，需要明确设计稿的尺寸，以确保准确转换。
• 单位精度：转换精度会影响转换后的单位值，建议根据实际情况选择合适的精度。
• 媒体查询：如果需要在媒体查询中使用 vw、vh 或 rem 单位，需要将 mediaQuery 选项设置为 true。
• 第三方库：postcss-px-to-viewport 可能会与其他 CSS 预处理库冲突，需要根据实际情况调整使用顺序。