作为前端开发者，我们经常需要适配不同尺寸的移动设备。为了解决这一问题，我们有很多选择，如 CSS 的 media query 和 JavaScript 脚本实现移动端自适应。但这些方法都有其不足之处，例如 media query 需要写很多重复的 CSS 代码，而 JavaScript 实现的移动端自适应还需要考虑到页面和 DOM 的加载时机问题。
简单移动端 rem 包 （simple-mobile-rem）是一款NPM包，它提供了一种更加方便、快捷的解决方案，可用于移动设备上适配字体和页面。本篇文章将向您介绍如何使用该包，并帮助您更好地理解移动端 rem 布局。
rem 是什么
rem 是 CSS3 新增的一个相对单位，它表示根元素的字体大小（在 html 标签中定义的 font-size）的倍数。这意味着在使用 rem 布局时，尺寸不是固定的像素值，而是相对于根元素的字体大小进行计算的。
例如，在 html 元素上设置 font-size: 16px;，则 1rem 将等于 16px。如果我们需要一个宽度为根元素宽度的一半的元素，我们可以设置其宽度为 0.5rem。这样，无论根元素的字体大小如何变化，该元素的宽度总是根据屏幕宽度进行自适应的。
安装 simple-mobile-rem
首先，我们需要在我们的项目中安装 simple-mobile-rem。
在命令行工具中，进入你的项目路径，然后输入以下命令：
npm install simple-mobile-rem --save
这将自动安装 simple-mobile-rem 包并将其添加到您的项目依赖中。
使用 simple-mobile-rem
在您的项目的入口文件中（例如 index.js 或 main.js），添加以下代码：
-- -------------------- ---- ------- ------ --------------- ---- ------------------- -- -- --------------- -- ----- --- - --- ----------------- -- ---- ------------- --- --------- --- -- -- ----- ---- -- ----------
这是用来创建 simple-mobile-rem 实例并调用其 init 方法的示例代码。让我们看看这些选项是如何工作的。
配置选项
baseFontSize默认为16。此选项设置的是页面中根元素的默认字体大小，它同时也影响了 rem 的换算比例。将其设置为16是为了方便计算。如果您希望根元素字体大小为14px，则应将此选项设置为14。maxWidth默认为640。此选项设置的是页面的最大宽度，它同时也影响了 rem 的换算比例。例如，当您的移动设备屏幕大于640像素时，1rem将不再等于16px，而是根据maxWidth和屏幕宽度的比例重新计算的。
init 方法
init 方法是用来初始化 simple-mobile-rem 实例的，它会将所有带有 rem 单位的 CSS 属性转换成像素值。
例如，以下 CSS 代码使用了 rem 单位：
.example {
width: 10rem;
font-size: 1rem;
}调用 init 方法后，该选择器将被转换为以下内容：
.example {
width: 160px;
font-size: 16px;
}示例代码
HTML 示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---- -- ------------------------- -- ---
----- ---------------- -----------------------------------
------------- ------ --- ---------------
-------
------
---- ---------------------- ------ ------ ----------
---- -- ------------------------ -- ---
------- ------------------------------------------
--------
-- -- --------------- --
----- --- - --- -----------------
-- ----- ---- --
----------
---------
-------
-------CSS 示例代码
.example {
width: 10rem;
font-size: 1rem;
}总结
通过 simple-mobile-rem，我们可以更加方便地实现移动端 rem 布局，从而避免了繁琐的计算和重复的代码。但是，记得在使用 rem 布局时，灵活运用 media query 和 JavaScript 实现不同屏幕尺寸下的适配。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d8488