前言
在Web开发中，常常会遇到需要根据不同的设备屏幕大小而对文档进行自适应缩放的情况。而在CSS中，我们通常使用em和rem这两个单位来完成这个任务。其中，rem单位相对于根元素的字体大小而定，因此我们可以通过调整根元素的字体大小来实现整个文档的自适应缩放。
但是，如果我们手动去计算每个元素所需要的rem单位值，将会非常麻烦和容易出错。因此，我们可以使用现成的npm包2rem来快速地完成这个任务。
什么是 2rem？
2rem是一款基于JavaScript的npm包，它可以将CSS中的rem单位值自动转换为对应的像素值，从而实现屏幕自适应缩放。通常情况下，我们只需要将CSS文件引用到文档中，就可以使用2rem进行自适应缩放。
如何使用 2rem？
安装 2rem
我们可以使用npm命令来安装2rem，在命令行中输入以下代码：
npm install 2rem
引用 2rem
当我们成功安装2rem后，我们可以在CSS文件中引用它并设置根元素的字体大小。例如，如果我们想要设置根元素的字体大小为16px，就可以这样写：
:root {
font-size: 16px;
}
/* 其他 CSS 代码 */
接着，在CSS文件中，我们可以将rem单位的值转换成对应的2rem值。以文本大小为例，如果我们想要将文本大小设置为10个rem，就可以这样写：
h2 {
font-size: 20rem;
}在HTML文件中使用 2rem
如果我们不想在CSS文件中使用2rem，也可以在HTML文件中使用。我们只需要在HTML文件中引用2rem.js，并在HTML文件中设置根元素的字体大小即可。例如：
-- -------------------- ---- -------
------
----------- ------------
----- --------------- ---------------------------- -------------------
-------
----- -
---------- -----
-
-- -- --- -- --
--------
------- -------------------------------
-------
------
---- -- ---- -- ---
-------请注意，在使用2rem之前，我们需要设置<meta>标签中的viewport属性，以确保文档能够正确地缩放。
2rem 常用API
2rem
该函数接收一个数值参数，返回一个对应的像素值字符串。例如：
const pixelValue = 2rem(10);
2rem.autoRoot
该函数接收一个选项对象，用于设置在窗口尺寸发生变化时，是否自动重新调整根元素的字体大小。例如：
2rem.autoRoot({
fontSize: 16, // 设置根元素字体大小，默认16px
maxWidth: 768, // 在窗口尺寸小于等于768时，自动重新调整根元素的字体大小
minFontSize: 12 // 根元素最小字体大小，默认为12px
});2rem.px2rem
该函数接收一个数值参数，返回一个对应的 rem 值字符串。例如：
const remValue = 2rem.px2rem(20);
总结
使用2rem可以方便地将rem单位转换成对应的像素值，从而实现屏幕自适应缩放。我们可以通过在CSS文件中引用2rem，或者在HTML文件中使用2rem.js来完成这个任务。除此之外，2rem还提供了一些常用的API函数，使得我们可以更灵活地进行自适应缩放的设置。
示例代码：
此处以在HTML文件中使用 2rem 为例。
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
----------- ---------------
-------
----- -
---------- -----
-
-- -
---------- ------
-
- -
---------- ------
------------ ------
-
--------
------- -------------------------------
--------
---------------
--------- ---
--------- ----
------------ --
---
---------
-------
------
-----------
----------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057cb781e8991b448ebffa