在前端开发中，适配不同的设备是一个很重要的问题，我们需要针对不同的设备和屏幕尺寸设置不同的样式，这就是所谓的响应式设计。而 rem 是一种相对长度单位，它可以根据不同的设备和屏幕尺寸自适应地调整字体和布局的大小，因此被广泛应用于前端开发中。在本文中，我们将介绍一款名为 rem-js 的 npm 包，它可以快速方便地设置 rem 以及改变页面的字体大小，从而实现响应式设计。
安装与引入
安装 rem-js 的命令如下：
npm install rem-js --save
在代码中引入 rem-js：
import RemJs from 'rem-js'; // 初始化 rem-js RemJs.init(1080);
这里我们将设计稿的宽度设为 1080，可以根据实际的设计稿宽度进行调整。
使用方法
设置 rem
在 rem-js 中，我们可以通过以下两种方式设置 rem：
- 根据屏幕宽度设置，例如：
RemJs.setRootByScreenWidth();
- 直接指定 rem 大小，例如：
RemJs.setRoot(16);
设置字体大小
rem-js 也可以方便地设置字体大小。我们可以通过以下两种方式设置字体大小：
- 根据屏幕宽度设置，例如：
RemJs.setFontSizeByScreenWidth();
- 直接指定字体大小，例如：
RemJs.setFontSize(16);
示例代码
下面是一个使用 rem-js 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ----------
-------
---------- -
------ -----
------- ------
-------- -----
---------------- -------
------------ -------
---------- -------
----------------- --------
-
---- -
------ -----
------- -----
-------------- ----
----------------- --------
-
--------
-------
------
---- ------------------
---- ------------------
------
------- ---------------------------------------------------
--------
-----------------
---------------------------------
---------
-------
-------在这个示例代码中，我们使用了 rem-js 来设置页面的 rem 大小以及字体大小。我们首先引入了 rem-js 的 CDN，然后通过 RemJs.init(1080) 来初始化 rem-js，将设计稿宽度设为 1080。接着我们使用 RemJs.setFontSizeByScreenWidth() 来设置字体大小，这样字体大小就会根据屏幕宽度来自适应地调整。
总结
使用 rem 可以让我们更方便地进行响应式设计，而 rem-js 可以让我们更快速地完成相应的操作。通过本文的介绍，相信读者已经掌握了 rem-js 的使用方法，可以在自己的项目中应用它来完成响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672581e8991b448e39fb