在移动端 Web 开发中，响应式布局是必不可少的。rem 单位是一种十分流行的响应式布局方案，因为它可以随页面缩放而变化。然而，手动设置 rem 单位十分繁琐，因此有很多工具可以帮助我们自动进行转换。其中，init-rem 是一个简单易用的 npm 包，可以帮助我们快速地开启 rem 单位模式。
本文将带领大家认识 init-rem，学习如何在项目中使用它。
什么是 init-rem？
init-rem 是一个 npm 包，它可以帮助我们自动完成 rem 像素值的计算，从而实现移动端响应式布局。该包会在生成的 CSS 文件中自动添加：
-- -------------------- ---- -------
---- -
---------- -----
-
------ ----------- ------ -
---- -
---------- -----
-
-
------ ----------- ------ -
---- -
---------- -----
-
-
------ ----------- ------- -
---- -
---------- -----
-
-
------ ----------- ------- -
---- -
---------- -----
-
-这段代码会根据屏幕宽度动态计算出最合适的 font-size，并在根元素上设置它。我们只需要编写 CSS 样式时直接以 rem 为单位设置宽高以及字体大小等属性即可。具体用法后面会详细介绍。
如何安装 init-rem？
在使用 init-rem 之前，我们需要先安装它。打开命令行界面，输入以下命令即可：
npm install init-rem --save-dev
需要注意的是，我们将 init-rem 安装为 devDependencies，因为它属于开发时的依赖项。
如何使用 init-rem？
安装完成后，我们接下来就可以开始使用 init-rem 了。首先，我们需要在 package.json 的 scripts 中配置一条初始化命令。打开 package.json 文件，并在 scripts 中添加以下代码：
"init-rem": "node ./node_modules/init-rem/init.js"
这段代码会告诉 npm 当我们执行 npm run init-rem 命令时，需要执行的命令为 node ./node_modules/init-rem/init.js。
接下来，我们需要自定义几个参数，用于确定我们希望的 font-size 范围和单位。打开命令行界面，输入以下命令：
npm run init-rem -- --max=640 --min=320 --unit=vw
这个命令中的 -- 表示我们要添加参数了。其中，--max 表示最大宽度，--min 表示最小宽度，--unit 表示单位。我们可以根据自己的需要自由更改这些参数。
执行完命令后，init-rem 会自动在项目的根目录下创建一个名为 init.css 的文件，其中包含了我们上文提到的自适应 font-size。
最后，我们需要将 init.css 引入我们的项目中，这样我们就可以愉快地使用 rem 单位进行开发了：
<!-- 在 head 标签中引入 init.css 文件 --> <link rel="stylesheet" href="init.css">
如何使用 rem 单位？
现在，我们已经成功地开启了 rem 单位模式，接下来我们就可以尽情体验 rem 单位带来的便利了。
比如，我们希望某个元素的宽度为 320px。如果不使用 rem 单位，我们需要编写以下代码：
.my-div {
width: 320px;
}而如果我们使用 rem 单位，只需要将 320px 换算成对应的 rem 值即可。假设当前屏幕宽度为 750px，我们初始化的 font-size 为 20px，那么 320px 对应的 rem 值为 16。因此，我们只需要编写以下代码即可：
.my-div {
width: 16rem;
}这样做的好处在于，当我们的页面需要适应其他的屏幕尺寸时，不需要改变样式值，只需要通过 init-rem 已为我们计算好的 font-size 值进行自适应缩放即可。
结语
本文介绍了 init-rem 这个 npm 包的使用及原理，希望可以帮助大家更好地适应移动端开发。同时，我们也见识到了使用 npm 包来提高开发效率的强大功能。希望大家可以尝试使用它，结合自己的项目进行实践！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9881e8991b448e757c