前言
在编写前端样式代码的过程中，我们常常需要给 CSS 属性设置像素值，但是在不同的设备上，像素的大小会有所不同，因此需要做到屏幕适配。同时，为了方便后续开发者的样式编写工作，我们也希望样式的编写方式简单明了。针对这个问题，我们可以选择使用 style-px2rem 这个 npm 包来解决。
安装并使用
安装 style-px2rem 包的命令为：
npm install style-px2rem --save-dev
安装完毕之后，我们可以在 CSS 文件中引入该包：
@import '~style-px2rem';
引入之后，我们就可以在样式中使用 px2rem() 函数来设置像素值。例如：
.header {
font-size: px2rem(20px);
height: px2rem(80px);
}在 CSS 渲染的过程中，包会自动将像素值转化为 rem 值。例如上面的代码会被转化成：
.header {
font-size: 1.33333rem;
height: 5.33333rem;
}配置
style-px2rem 包支持一些配置，可以通过修改 webpack.config.js 文件来进行配置。具体的配置项如下：
rootValue
默认值为 75，表示将一个像素值转化为多少个 rem 值。例如 rootValue = 75 表示 1px 将被转化为 0.01rem。
unitPrecision
默认值为 5，表示 rem 值保留的小数点位数。
propList
默认为 ['*']，表示匹配所有 CSS 属性值的 px 值进行转化。可以定义为数组的形式，例如 ['width', 'height'] 表示只将 width 和 height 的属性值转化。
selectorBlackList
默认为 []，表示不进行转换的 CSS 选择器。
示例代码
下面是一个完整的示例：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
-------- -
-------------------------
---------- ---
-------------- --
--------- ----- --------------
------------------ -----------
---
--
--
--
--
--
--
--
-- ---
---- -------------------- ---- -------
-- ------- --
------- ----------------
------- -
---------- ----- -- ---- --
------- -------------
-
------- -
------ --------------
------- ------------ -------------
-
------- -
------- ------ -- ---- --
-在这个示例代码中，我们可以看到 style-px2rem 的具体使用方式，并且也提供了一些配置项帮助我们更好地适配不同的屏幕大小。使用该包可以真正做到样式的简单明了与屏幕的适配，值得开发者掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672663660cf7123b364e1