CSS rem - 绿叶网

CSS rem 是什么？

在 CSS 中，rem 全称 “font size of the root element” 。rem 是一个相对单位，它相对的是 “根元素的字体大小”。其中，1rem 单位的大小等于根元素字体大小的值。

rem 跟 em 很相似，不过也有明显区别：em 是相对 “当前元素” 的字体大小（font-size），而 rem 是相对 “根元素” 的字体大小。这里的 font-size 指的都是以 px 为单位的 font-size 值。

提示: 如果根元素（html 元素）的 font-size 没有定义，则会使用浏览器默认的字体大小，通常为 16px。

rem 拥有 em 同样的优点，主要包括以下 2 个方面：

可伸缩性：rem 单位可以根据当前元素的字体大小自动调整大小，非常适合用于创建响应式布局。
保持比例：使用 rem 单位可以确保元素之间比例保持一致，即使更改了字体大小。

当然，rem 也存在一定缺点，比如：

依赖于根元素字体大小：rem 单位的大小取决于根元素的字体大小。如果更改了根元素的字体大小，则所有使用 rem 单位的元素都会相应更改。
可能导致布局问题：在某些情况下，使用 rem 单位可能会导致布局问题，例如元素之间的间距可能不一致。如果根元素的字体大小设置不当，可能会影响整个页面的布局，因此需要谨慎设置根元素的字体大小。

提示: 如果想要创建响应式布局，我们更多的是使用 rem 单位，而不是 em 单位。

使用 rem 作为统一单位

首先小伙伴们要清楚一点：所有主流浏览器的默认字体大小都是 16px。

如果在一个页面中，我们想要统一使用 rem 作为单位，此时可以拿默认字体大小开刀。也就是说，对于任何元素我们都不需要设置 font-size 为多少 px，而是继承根元素的 font-size 值（即 16px），然后再使用 rem 换算即可。

如果使用浏览器默认字体大小（16px），其中 rem 与 px 对应关系如下：

1rem = 16px×1 = 16px
0.75rem = 16px×0.75 = 12px

为了简化 font-size 的计算，我们在 CSS 中提前声明 body {font-size: 62.5%;}。通过这个声明，我们可以使得默认字体大小变为 16px×62.5%=10px，此时 rem 与 px 对应关系如下：

1rem = 10px
0.75rem = 7.5px

也就是说，我们只需要将原来的 px 值除以 10，然后换上 rem 作为单位就行了。这是一个非常棒的技巧。在实际开发中，如果我们想要统一使用 em 作为单位，都是使用这个技巧。

示例 1：使用 rem 作为 font-size 单位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body { font-size: 62.5%; }
        #p1 { font-size: 1em; }
        #p2 { font-size: 1.5em; }
        #p3 { font-size: 2em; }
    </style>
</head>
<body>
    <p id="p1">当前字体大小为1rem，也就是10px</p>
    <p id="p2">当前字体大小为1.5rem，也就是15px</p>
    <p id="p3">当前字体大小为2rem，也就是20px</p>
</body>
</html>

页面效果如下图所示。

使用 rem 作为 font-size 单位

示例 2：rem 是相对根元素

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html { font-size: 62.5%; }
        div {
            width: 20rem;
            height: 15rem;
            font-size: 3rem;
            line-height: 15rem;
            text-align: center;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

rem 是相对根元素

分析：

rem 是相对根元素（html 元素）的 font-size 而言的。我们在浏览器控制台也能直观地看出来，如下图所示。

浏览器控制台查看 rem 结果

除了字体大小，rem 还可以用于设置元素的尺寸、间距等，例如：

.container {
    width: 96rem;     /* 容器宽度 */
    margin: 0 auto;   /* 水平居中 */
    padding: 2rem;    /* 内边距 */
}

.item {
    width: 20rem;     /* 元素宽度 */
    height: 15rem;    /* 元素高度 */
    margin: 1rem;     /* 外边距 */
}

在实际开发中，rem 常用于需要整体缩放的布局，例如，移动端页面、多平台适配页面等。

rem 与响应式设计

rem 单位经常用于响应式设计中，因为它是相对于根元素字体大小而言的，可以非常方便地通过调整根元素的字体大小，来实现页面元素的整体缩放。

举个例子，我们可以结合 CSS 媒体查询来设置根元素在不同屏幕尺寸下的字体大小，从而实现页面的响应式布局：

html {
    font-size: 62.5%;     /* 默认情况下，1rem = 10px */
}

.box {
    width: 20rem;         /* 元素尺寸会根据根元素字体大小缩放 */
    height: 10rem;
    font-size: 1.6rem;
}

@media (max-width: 768px) {
    html {
        font-size: 50%;   /* 在小屏幕下，1rem = 8px */
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 75%;   /* 在大屏幕下，1rem = 12px */
    }
}