前言
在开发 web 站点时，我们经常需要使用像素作为 CSS 属性的单位。不过，这种做法存在一些缺陷。当我们的站点访问设备尺寸不同时，像素单位的大小可能会无法自适应。针对这个问题，有一种解决方案叫做 rem 单位。它以根元素字体的大小为基准计算尺寸，并且可以自动适应不同的设备。不过，我们需要手动将像素转换为 rem。这时候，broccoli-pixrem 就来到了我们的视野中。
什么是 broccoli-pixrem
broccoli-pixrem 是一个 npm 包，可以将我们项目中使用的像素单位转换成 rem 单位，并且可以自动根据我们设定的根字体大小进行计算。配合 broccoli，我们可以快速地将我们的项目构建出一个适应性强的版本。
安装
首先，我们需要在项目根目录下使用 npm 安装 broccoli:
--- ------- -------- ----------
接着，在项目根目录下通过 npm 安装 broccoli-pixrem：
--- ------- --------------- ----------
使用
安装完成后，我们就可以进行配置。在项目根目录下创建一个名为 Brocfile.js 的文件，并按以下格式配置：
--- ------ - --------------------------- --- ----------- - ----------- --- ------- - --------- --- --------- - - --------- - --- -- ----- ------------- - -- -- -- ------------- - --- -- -------- ------- - ----- ---------- - ------ ------------- - - -- -------------- - ------------------- ---------- ---------
各配置项含义如下：
- sourceTrees：你想要进行转化的文件路径，例如 'public'
- destDir：输出的路径
- remConfig：rem 单位的配置对象，具体解释见下
其中，我们最关心的是 remConfig，它的详细解释如下：
rootValue
我们知道，rem 单位的计算基于根元素字体大小。一般情况下，我们会为根元素设置一个字体大小，比如：
---- - ---------- ----- -
通常情况下我们会将其设置为 16px。这时 rootValue 的值就应该为 16。
unitPrecision
精度，即保留小数点的位数，默认值是 5。
例如我们将根字体设为 16，把 100px 转化为 rem，则计算式为：
100/16 = 6.25rem
如果我们设置 precision 的值为 3，则输出的计算值将保留 3 位小数，即 6.25 转化为 6.250。
propWhiteList
propWhiteList 为不想被转化为 rem 的属性数组，默认为空，即所有属性都会被转化为 rem。
如果我们想让某些属性保持原状，比如 border，我们可以这样配置：
-------------- ----------
这样，我们所有的 border 属性都会保持原样，不会被转化为 rem。
replace
一个布尔值，指示是否替换原有的像素值为 rem 值，默认为 true。
如果我们将其设置为 false，则原属性值和算出来的 rem 值都会存在属性中。
mediaQuery
像 propWhiteList 一样，mediaQuery 是一个布尔值，表示是否高清化设备，也就是在 media queries 中根据条件缩放。
默认为 false。
minPixelValue
这个值用于设置最小转化的像素值，默认为 0。
如果我们将其设为 1，则 px 值小于 1 的不会被转化为 rem，而是保留原有的 px 值。
示例代码：
-- --------- --- ------ - --------------------------- --- ----------- - ----------- --- ------- - --------- --- --------- - - --------- - --- ------------- - -- ------------- - --- ------- - ----- ---------- - ------ ------------- - - -- -- -------- -------------- - ------------------- ---------- ---------
总结
使用 broccoli-pixrem 可以快速地将我们项目中使用的像素单位转换成 rem 单位，并且可以自动根据我们设定的根字体大小进行计算。通过了解该 npm 包的原理和使用方法，我们可以在开发 web 站点时更好地适应不同设备的需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c88ccdc64669dde5089