CSS 中玩转 rem：尺寸单位笑着用！

CSS 是前端的魔法棒，但光有样式还不够，尺寸单位也是个绕不过的坎！今天我们来聊聊 rem，这个前端圈的“真大哥”，如何在布局中实现灵活的响应式设计。

一、什么是 rem？

rem ：它的计算依据是根元素 html 的字体大小。你给 html 设置的字体大小是多少，页面上所有用 rem 作为单位的元素都会根据这个值按比例调整大小。

深度解读：

rem 就像办公室的老大，其他元素都得听它的。只有 html 元素说话它才听，html 定了个 16px 的规矩，它就按 16px 的比例执行，不管谁想插嘴，它都不理会。你要改它？行！去找老板（html）谈吧。

例子：

html {
    font-size: 16px; /* 老板定规矩：每个单位都是 16px */
}

p {
    font-size: 2rem; /* 2rem = 2 * 16px = 32px */
}

在上面的例子中，我们将 html 元素的字体大小设置为 16px，那么 p 标签的字体大小为 2rem，最终显示为 32px。

二、rem 的具体应用场景

1. 响应式布局中的字体调整

rem 非常适合响应式布局中的字体调整。你只需要修改根元素 html 的字体大小，页面中所有基于 rem 的元素都会随之调整大小。这样，你只需一次设置，就能让页面在不同分辨率的设备上保持一致的比例。

深度解读：

想象一下，你给 html 元素加了个“魔术遥控器”，轻轻一调，页面上所有的元素都乖乖听话，自动变大变小。像调音师调节音量一样，页面内容也能跟着屏幕大小变化，真是“随心所欲，不逾矩”啊！

html {
    font-size: 2vw; /* 根据屏幕宽度动态调整字体大小 */
}

p {
    font-size: 1.5rem; /* 1.5倍的根字体大小，自动适应屏幕 */
}

在这个例子中，我们通过设置 html 的 font-size 为 2vw(后期会更新vw、vh)，让根元素字体大小随着视窗宽度变化。p 元素的字体大小为 1.5rem，即始终为根字体大小的 1.5 倍，因此字体会随视窗调整而自动缩放。

2. 页面间距和元素尺寸的自适应布局

rem 不仅能用来设置字体大小，还可以应用在布局的边距、间距和元素尺寸上。这样可以确保页面布局随着根元素字体大小的变化而自动调整，保证不同设备上页面布局的合理性。

深度解读：

假如你在设计网页时遇到了间距和布局问题，就像给每个员工定了办公桌尺寸一样，你可以用 rem 确保所有人的“办公桌”（布局）都根据屏幕大小调整，不会有人“占地太大”或者“挤成一团”。

html {
    font-size: 16px; /* 根元素的字体大小 */
}

.container {
    width: 30rem;  /* 宽度随根字体大小调整 */
    padding: 2rem; /* 间距根据根字体大小调整 */
    margin: 1rem;  /* 外边距同样适应根字体大小 */
}

这个例子中，容器 .container 的宽度、内边距和外边距都使用了 rem 作为单位。只要修改根元素的字体大小，整个页面布局都会自动调整。

三、配合 flexible.js 让 rem 更强大

在移动端开发中，rem 和 flexible.js 是一对黄金搭档。flexible.js 能动态设置 html 元素的 font-size，根据不同设备的屏幕宽度自动调整页面布局。通过这种方式，你可以轻松实现复杂的响应式布局。

什么是 flexible.js？

flexible.js 是阿里巴巴团队开源的一个库，专门用来动态计算 html 的 font-size，确保在不同分辨率的设备上页面都能自动适配。它的原理是根据设备的宽度设置 rem 的基础值，比如让 rem 的基础大小等于屏幕宽度的 1/10，布局就能自适应地缩放。

如何使用 flexible.js？

1. 引入 flexible.js：在 HTML 中引入 flexible.js 文件，通常放在 head 标签中。

   <script src="https://cdn.bootcdn.net/ajax/libs/amfe-flexible/2.2.1/index.min.js"></script>
   

2. 使用 rem 进行布局： 引入 flexible.js 后，html 的 font-size 会根据设备屏幕宽度自动调整，因此你只需要使用 rem 单位布局即可。

深度解析：

flexible.js 就像是每个页面的“私人定制工程师”，无论你的设备多大，它都能调整你的页面，让布局看起来始终那么“精致合体”，让你根本不用为不同设备操心！

.container {
    width: 10rem; /* 根元素字体大小会根据 flexible.js 自动调整 */
    height: 5rem;
    padding: 1rem;
    margin: 1rem;
}

在这个例子中，flexible.js 会根据设备宽度动态设置 html 的 font-size。假设在某个设备下，根元素的 font-size 为 50px，那么 .container 宽度为 500px（10rem），在另一个设备上可能变成 300px，但比例始终保持一致，页面看起来依然整齐划一。

四、总结

rem 是 CSS 中强大的尺寸单位之一，特别适合响应式布局中的字体、间距和元素尺寸的调整。结合 flexible.js，你可以轻松实现适配各种屏幕尺寸的布局。记得每次使用 rem，都让 html 元素来当老大，它一说话，整个页面都听它的。

前端：“有了 rem 和 flexible.js，我的页面简直是‘一调全场，千机适配’，前端开发变得如此轻松愉快！”