在前端开发中，响应式设计已经成为一个不可避免的趋势。为了支持不同设备的屏幕尺寸和分辨率，我们需要使用一些技术来使网站布局能够完美适配各种设备。其中，rem 是一种非常常用的技术。而 remorajs 就是一个可以帮助我们更加便捷地使用 rem 技术的 npm 包。
本篇文章将介绍 remorajs 的使用教程，包括安装、配置以及使用方法等，并且会通过实际例子帮助大家更好地理解和掌握这个工具。
安装
要使用 remorajs，我们首先需要在项目中安装该 npm 包。使用如下命令：
npm i -S remorajs
配置
使用 sass 或者 less
如果是使用 sass 或者 less 来编写 CSS 代码，我们可以在样式文件中定义一个全局变量 $remBase：
$remBase: 50px;
这里以 50px 为例，实际值可以根据实际需求进行调整。
然后在样式文件的最开始处导入 remorajs：
@import "~remorajs";
这里使用的是 sass 的语法，less 的语法类似。
使用纯 CSS
如果是使用纯 CSS 来编写样式，则需要在 HTML 文件中使用 remorajs：
-- -------------------- ---- -------
------
------- -----------------------------------------------------
-------
----- -
----------- -----
-
---- -
---------- ----------
-
--------
-------这里定义了一个名为 --rem-base 的全局变量，然后在样式中使用 rem() 函数来指定字体大小，这样就可以通过改变 --rem-base 的值来改变整个网站的字体大小。
实际使用
有了 remorajs，我们就可以更加方便地使用 rem 技术了。下面是一个实际的例子。
假设我们的网站需要适配不同设备的屏幕尺寸，除了常规的屏幕尺寸，还包括 iPad 的不同版本。我们需要按照下列表格来适配：
| 设备 | 最小宽度（px） | 最大宽度（px） |
|---|---|---|
| iPhone 5/SE | 320 | 568 |
| iPhone 6/7/8 | 375 | 667 |
| iPhone 6/7/8 Plus | 414 | 736 |
| iPhone X/XS | 375 | 812 |
| iPhone XS Max | 414 | 896 |
| iPad mini （1/2/3/4） | 768 | 1024 |
| iPad 第 5/6/7/8 代 | 768 | 1024 |
| iPad Pro 9.7 英寸 | 768 | 1024 |
| iPad Pro 10.5 英寸 | 834 | 1112 |
| iPad Pro 11 英寸 | 834 | 1194 |
| iPad Pro 12.9 英寸 | 1024 | 1366 |
对于不同的设备，我们需要使用不同的样式。这里使用 sass 来编写 CSS，示例代码如下：
-- -------------------- ---- -------
--------- -----
-------- ----- ------
-------- ----- ------
--------- ----- ------
-------- ----- ------
------------ ----- ------
----------- ----- -------
---------- ------ -------
----- -
----------- ------------
-
---- -
---------- -----
-
------ ---- ------ --- ----------- -------- -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- -------- -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- --------- -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- -------- -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- ------------ -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- ----------- -
---- -
---------- ----------
-
-
------ ---- ------ --- ----------- ---------- -
---- -
---------- ----------
-
-这里的 $size-* 变量指定了不同设备的尺寸范围，html 元素的 font-size 属性也根据不同的尺寸做了不同的设置。
至此，我们已经成功地使用 remorajs 来实现了不同设备的排版适配。通过学习这个例子，我们可以更好地理解 remorajs 的使用方法，并发现它对我们的前端开发工作带来的便捷性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66f2a