1. 什么是 node-rem
Node-rem 是一个可以将 px 自动转换成 rem 的 npm 包，它可以帮助开发者在开发响应式网站时更加便利地实现布局。
2. 安装
通过 npm 可以很方便地安装 node-rem：
npm install node-rem --save-dev
3. 使用
在安装 node-rem 后，我们需要在项目的入口文件中引入它。
import NodeRem from 'node-rem';
NodeRem({
maxWidth: 750,
unit: 'rem'
}); 在上面的代码中，我们通过 NodeRem 函数来启用 node-rem，然后我们传入一些参数：
maxWidth：表示设计稿的最大宽度，单位是 px。unit：表示 css 中要转换的单位，可以是 px、rem 等等。
当我们需要在 css 中使用纯粹的 px 单位时，可以使用特殊的注释语法来忽略转换，如下所示：
height: 100px; /*no*/
这表示该样式不会被 node-rem 转换成 rem 单位。
4. 示例
下面是一个简单的例子，为了方便看到效果，我把 maxWidth 设置成 500，但实际情况中请根据设计稿的实际宽度来设置：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------------
-------
---------- -
------ -----
---------- ------
------- - -----
-
---- -
------- ------
----------------- --------
-------------- -----
-
------- -
------- ------ ------
----------------- --------
-------------- -----
-
-- ------------------------- --- - ---------- --
-- -
---------- -----
-------------- -----
-
- -
---------- -----
-------------- -----
-
--------
-------
------
---- ------------------
------------ ---------
----- -------- -------------
---- ------------------
---- ---------------------
------
------- -----------------------------------------------------------------------
------- -------------------------------
--------
---------
--------- ----
----- -----
---
---------
-------
-------5. 总结
本文介绍了如何使用 node-rem 实现 px 转 rem 的自动转换，同时提供了示例代码以便大家参考。在实际开发中，我们可以根据设计稿的实际宽度来设置 maxWidth，以便更准确地达到我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226da