postcss-pxtorem+lib-flexible：轻松搞定响应式布局的 px 转 rem 组合

ZzMemory
250 阅读6分钟

前言

在移动互联网蓬勃发展的当下，用户使用的设备屏幕尺寸千差万别，从小巧的手机到超大屏的电脑显示器，应有尽有。这就对前端开发提出了严峻的挑战，如何让网页在各种不同尺寸的屏幕上都能呈现出良好的布局和用户体验，响应式布局成为了前端开发的核心需求之一。然而，在实现响应式布局的过程中，开发者常常会面临单位换算繁琐、不同屏幕适配困难等问题。不过，postcss-pxtorem 与 lib-flexible 这对黄金组合，能帮助我们轻松攻克这些难题。

一、postcss-pxtorem（化px为rem）

介绍

  • 手动计算rem的不便： 首先来介绍postcss-pxtorem，我们都知道要实现响应式布局，就不能使用绝对单位px将元素宽高定死，而是要用相对单位rem（1rem = html（根元素）的font-size大小）来定义一个可以变化宽高的元素，但是在日常使用中，我们常常要掏出计算器手动算出设计稿中元素的px尺寸对应的rem，这很不方便。
  • 自动计算rem： postcss-pxtorem是一款功能强大的 PostCSS 插件，它的主要作用是将 CSS 中的 px 单位自动转换为 rem 单位，从而为响应式布局提供便利。比如说一个宽高都为 200px的元素，postcss-pxtorem会自动算成12.5rem（1rem = 16px）。
    • 补充： 行内样式的 px 不会被转换。

安装

你可以通过 npm 或 yarn 来安装 postcss-pxtorem，具体命令如下：​

  • 使用 npm：

    npm install postcss-pxtorem --save-dev

  • 使用 yarn：

    yarn add postcss-pxtorem --dev

参数的配置

安装完成后，需要进行相应的配置。在 postcss 的配置文件（如 postcss.config.js）中进行设置，常用的配置参数如下：

  • rootValue：设置根元素（html）的字体大小，这是 px 转换为 rem 的基准值。例如，若 rootValue 设为 16，那么 1rem 就等于 16px。

  • propList：指定哪些 CSS 属性需要进行单位转换，默认值为 ['*']，表示所有属性都进行转换。你也可以根据需要进行自定义，如 ['font-size', 'width', 'height']。

  • exclude：用于指定排除转换的文件或文件夹路径，可以是字符串、正则表达式或字符串数组。例如，设置为 ['/node_modules/'] 可以排除项目中 node_modules 文件夹下的所有文件进行 px 到 rem 的转换，方便保留第三方库原有的样式单位。

  • unitPrecision：设置 rem 单位的小数位数，默认是 5。

  • selectorBlackList：指定不需要进行单位转换的选择器，例如 ['.ignore']，则类名为 ignore 的元素及其子元素的 px 单位不会被转换。

  • replace：是否直接替换原来的 px 单位，而不是添加一个备用单位，默认值为 true。

  • mediaQuery：是否在媒体查询中也进行单位转换，默认值为 false。

  • minPixelValue：设置最小的 px 值，当 px 值小于该值时，不进行转换，默认值为 0。

  • 示例： 简单使用参数配置示图如下：

    简单使用示例.jpg

二、lib-flexible（自动计算rem）

在postcss-pxtorem算出一个元素的尺寸为多少rem之前，我们还需要知道 1rem 在不同设备上应该分别等于多少 px。因为html默认的font-size为16px，在小屏幕上可能大了，在大屏幕上又可能小了，我们急需一个可以自动设置合适的rem的方法。
在了解到lib-flexible之前，我们会感到很棘手，不过还好，我们有lib-flexible。

什么是lib-flexible

lib-flexible 是一个用于设置 rem 基准值的 JavaScript 库，由阿里开源。它会根据设备屏幕的宽度动态地调整 html 元素的 font-size，从而使得 rem 单位能够根据屏幕尺寸进行自适应变化。

安装方法

同样可以通过 npm 或 yarn 来安装 lib-flexible。

  • 使用 npm：

    npm install lib-flexible --save

  • 使用 yarn：

    yarn add lib-flexible

使用方法

在项目的入口文件（如 main.js）中引入 lib-flexible 即可：import 'lib-flexible'。

  • 示图：

使用lib-flexible示例.jpg
引入后，lib-flexible 会自动根据屏幕宽度计算并设置 html（根元素） 的 font-size。默认情况下，它会将屏幕宽度分为 10 等份，即 1rem 等于屏幕宽度的 1/10。例如，在宽度为 375px 的手机屏幕上，1rem 等于 37.5px。

三、结合使用实现响应式布局

postcss-pxtorem 与 lib-flexible 的结合使用，能完美实现响应式布局。其原理是：postcss-pxtorem 将我们在 CSS 中编写的 px 单位转换为 rem 单位，而 lib-flexible 则根据屏幕宽度动态调整 rem 所对应的 px 值。这样一来，当屏幕尺寸发生变化时，rem 单位会自动进行适配，从而使网页元素的大小也随之发生相应的变化，达到响应式布局的效果。

实际案例

假设我们要设置一个 div 元素的宽度为 100px，高度为 50px，字体大小为 14px。

配置前：

在未使用这两个工具时，CSS 代码如下：

.box {
  width: 100px;
  height: 50px;
  font-size: 14px;
}

配置后：

当我们配置好 postcss-pxtorem 后，它会将上述代码中的 px 转换为 rem。假设 rootValue 设为 16，那么转换后的代码如下：

.box {
  width: 6.25rem;
  height: 3.125rem;
  font-size: 0.875rem;
}

自动计算 rem：

  • 屏幕未变：  lib-flexible 会根据屏幕宽度设置 html 的 font-size，常见计算规则是将屏幕宽度等分为 10 份。以 375px 宽的屏幕为例，此时 html 的 font-size 为 37.5px，即 1rem 等于 37.5px。那么该 div 的实际宽度为 6.25×37.5=234.375px，高度为 3.125×37.5=117.1875px，字体大小为 0.875×37.5=32.8125px。
  • 屏幕改变：  当屏幕宽度变为 750px 时，html 的 font-size 会变为 75px，该 div 的宽度则变为 6.25×75=468.75px，高度变为 3.125×75=234.375px，字体大小变为 0.875×75=65.625px，实现了不同屏幕下的自适应显示。

注意事项

  • 在使用 postcss-pxtorem 时，对于一些不需要进行转换的 px 单位，可以通过设置 selectorBlackList 或在属性值后添加注释/* px */来避免转换。
  • 在开发过程中，建议使用浏览器的开发者工具模拟不同屏幕尺寸，以便及时调整样式。
  • 还需要注意的是，在实际项目中，lib-flexible 在处理某些特殊屏幕尺寸时可能会出现一些问题，这时可以根据实际情况对其进行自定义配置。还需结合媒体查询等方式，处理一些极端屏幕尺寸下的显示效果，避免出现布局错乱等问题。

结语

postcss-pxtorem 与 lib-flexible 的组合为响应式布局的实现提供了高效、便捷的解决方案。通过 postcss-pxtorem 将 px 转换为 rem，再配合 lib-flexible 动态设置 rem 基准值，能够让我们的网页在各种不同尺寸的设备上都呈现出良好的布局和用户体验，大大提高了前端开发的效率。如果你还在为响应式布局而烦恼，不妨尝试一下这对工具组合，相信会给你带来意想不到的效果。

avatar
文章
阅读
粉丝