什么是REM？
REM（font size of the root element）是一种相对于根元素字体大小的单位。在Web开发中，通常把HTML文档中的<html>元素的字体大小设置为基准值。例如，将 <html> 的字体大小设为 16px，则 1rem 就等于 16px。
为什么要使用REM作为单位？
移动设备屏幕尺寸不同，而CSS的像素单位（px）在不同的分辨率下会有不同的物理尺寸，这意味着我们需要根据设备屏幕来调整CSS样式的大小。使用REM可以解决这个问题，因为它是相对于根元素字体大小的单位，所以无论屏幕的大小如何，REM的值都是相对固定的。
实现自适应布局
要实现基于REM的移动端自适应布局，首先需要设置根元素的字体大小为一个合适的值，通常是16px。然后，我们可以使用REM作为其他元素的长度单位。
例如：
html {
font-size: 16px;
}
div {
width: 5rem; /* 80px */
height: 3rem; /* 48px */
}上述代码中，div元素的宽度为5REM，相当于80px，高度为3REM，相当于48px。
REM计算公式
如果我们要将一个像素值转换为REM值，可以使用以下公式：
rem = px / (rootFontSize / 16)
其中，rootFontSize是根元素的字体大小，通常为16px。例如，如果要将一个100px的值转换为REM，可以这样做：
100px / (16 / 16) = 6.25rem
推荐的REM方案
在实际开发中，可以使用以下方案来适应不同屏幕尺寸：
- 设置根元素的字体大小为16px，即
html { font-size: 16px; } - 使用REM作为所有元素的长度单位
- 如果想让某些元素在大屏幕上更宽一些，可以使用媒体查询调整根元素的字体大小，例如：
@media screen and (min-width: 480px) {
html {
font-size: 20px;
}
}示例代码
下面是一个基于REM的移动端自适应布局的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- --------------
-------
---- -
---------- -----
-
--- -
------ -----
------- -----
----------------- -----
------ -----
----------- -------
------------ -----
-
-- -------------- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
--------
-------
------
----------- ----------
-------
-------结论
基于REM的移动端自适应布局是一种灵活而强大的方案，可以帮助我们在不同屏幕尺寸下实现一致的页面布局。通过设置根元素的字体大小并使用REM作为长度单位，我们可以轻松地实现自适应布局，并通过媒体查询调整布局以适应大屏幕设备。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24318