在 Web 开发中，我们经常需要去处理页面中 CSS 中的单位问题。而在这个过程中，我们也许会遇到一个问题：如何比较方便地将某个页面中所有的 px 单位都转成 rem 或者 em 单位呢？这时，我们就可以使用 npm 包 kill-all-the-px。
使用方式
kill-all-the-px 包可以通过 npm 安装，使用如下命令：
--- ------- ---------------
安装完成后，我们就可以在 JavaScript 中使用它了。假设我们需要将页面中的所有 px 转成 rem，可以使用如下代码：
----- ---- - --------------------------- ----- ------------------- - ------------------------- ------ -----------
convert 方法接受 3 个参数：
base: 可选，rem或em，默认值为rem，即将px转成rem单位。unitSize: 可选，设置一个基础的字号大小（px），默认值为16。cssString: 要被转化的样式内容，可以是一个 css 字符串。
以转化所有 px 为 rem 为例，在第一个参数中我们设置了 1rem=10px，这表示只要将所有的 px 换成对应的 rem 值即可（比如原本的 15px 就变成了 1.5rem）。
注意，在使用 katp.convert 方法前需要使用 require('kill-all-the-px') 导入包。
示例代码
接下来，我们来看一个完整的示例代码。假设有这样一段 HTML 和 CSS 代码：
------
------
-------
---- -
---------- -----
-
---------- -
------ ------
------- - -----
-
---- -
------ ------
------- ------
----------------- ----
------- - -----
-
---- ---- -
---------- -----
------------ ----
-
---------- -
---------- -----------------
-
--------
-------
------
---- ------------------
---- ------------
----------- -------------
------
------
-------
-------如果我们想把这份 CSS 中的所有 px 单位都转换成 rem，可以使用如下代码：
----- ---- - ---------------------------
----- --------- - -
---- -
---------- -----
-
---------- -
------ ------
------- - -----
-
---- -
------ ------
------- ------
----------------- ----
------- - -----
-
---- ---- -
---------- -----
------------ ----
-
---------- -
---------- -----------------
-
--
----- ------------------- - ------------------------- ------ -----------
---------------------------------最后，我们得到的 convertedStyleSheet 就是将所有 px 单位转为 rem 后的结果。可以在控制台里打印结果来看看。
总结
在前端开发中，处理 CSS 中的单位问题是一个不容小觑的难点。借助于 kill-all-the-px 这个 npm 包，我们可以很方便很快速地完成这项工作，不仅减少了开发时间，同时也提升了开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600554b181e8991b448d1e7f