在现代 Web 开发中，响应式设计已经成为了一种普遍的技术选择，因为响应式设计能够兼容各种不同尺寸和分辨率的设备，以及适应用户设备的不同旋转方向。而在实现响应式设计时， REM 适配是一种比较实用的技术手段，因为它能根据屏幕的大小自动调整页面中元素的大小，从而实现更好的用户体验。本文就将详细介绍 REM 适配的实现方法及其相关配置和示例代码。
什么是 REM
"REM" 是 "root em" 的缩写，它是一种相对单位，相对于 html 元素的 font-size 值而言，这个值是页面初始化时默认设置的。因为 REM 是相对于根元素的单位，所以可以用 REM 来实现响应式设计。例如，如果根元素的 font-size 值是 16 像素，那么 1 REM 将等于 16 像素。
如何实现 REM 适配
实现 REM 适配的方法有很多，下面介绍最常用的两种：
使用 media query
我们可以根据屏幕尺寸来定义不同的 font-size 值，从而实现 REM 适配。例如，下面的 CSS 代码片段可以在屏幕宽度达到 640 像素时，将根元素的 font-size 设置为 24 像素：
------ ----------- ------ -
---- -
---------- -----
-
-这样，基于 REM 的布局就可以根据屏幕尺寸自适应调整了。
使用 JavaScript 实现
我们也可以使用 JavaScript 来将 REM 适配实现在页面加载时自动设置，下面是一个示例代码：
--- --------------- - ---------- -
--- ----- - ----------------- - --- - --- - ------------------
--- ------------ - ------ - ---- - ----
--------------------------------------- - ------------ - -----
-
------------------
--------------------------------- ---------- -
------------------
-- -------以上代码实现了当屏幕宽度大于 750 像素时，设置根元素的 font-size 值为 100 像素。当屏幕宽度小于 750 像素时，设置根元素的 font-size 值为屏幕宽度的百分比（即根元素宽度为屏幕宽度的 1%），这样就可以实现 REM 元素大小的自适应。每次窗口大小发生变化时，由于其中添加了事件监听器（"resize" 事件），因此将调用 setRootFontSize() 方法以重新计算和设置 font-size 值。
配置和指导
在实现 REM 适配时，需要注意以下几个方面：
- 设置基准值：如上面的 JavaScript 实现方法所示，需要设置根元素（html）的 font-size 值，以此作为 REM 单位的基本偏移量，使其符合屏幕尺寸自动适配。通常，我们使用屏幕最小宽度的约束值（如 iPhone SE 的 320px、Android 设备的 360px 等），以此来自动调整 REM 的值。
- 使用 media query 限制样式规则：为保证 REM 的精确适配，可以使用 media query 限制样式规则，并在不同屏幕尺寸下使用不同的 REM 值来实现适配效果。
- 基于 viewport 实现：可以在页面头部加入 viewport meta 标签，以便让设备以浏览器设定的宽度和比例进行页面缩放和自适应。
总之，在实现 REM 适配的过程中，我们需要进行充分的理解，并根据实际情况进行详细的配置和指导，以此实现更好的用户体验。
结论
本文介绍了在响应式设计（RWD）中，如何使用 REM 适配实现自动调整页面元素大小、更好的用户体验等功能，并提供了两种实现 REM 适配的方法—基于 media query 和 JavaScript 的实现，以及相应的配置和指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6702080af59b73a932a4fc07