CSS 中的 Em 和 Rem 单位?
您可能在使用 CSS 属性设置元素大小时注意到了两个选项:绝对单位和相对单位。绝对单位完全相同且固定，其大小可以用 cm、mm、px 来设置。而相对单位则是相对于其他元素(可以是父元素或任何其他元素)的。
在本教程中，我们将比较 CSS 中 em 和 rem 单位。
Em 单位
使用 em 单位可以更改元素的大小，这些元素的字体大小是相对于其父元素的。这意味着如果父元素的大小发生变化，子元素也会随之变化。
让我们看一个例子来理解 em 单位的作用。
示例
在此示例中，我们将子元素的字体大小更改为 35px。子元素的边距也将更改为 50px。
在这里，我们首先创建一个父元素，然后将其大小设置为 17.5 px，并将子元素的字体大小设置为 1em，这意味着子元素的字体大小将翻倍，而子元素的边距保持不变。让我们看看代码的输出。
注意 - font-size 属性的用法。当 font-size 用于其他属性时，它是相对于父元素的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Difference between em and rem</title>
<style>
.father {
paddding: 0px;
font-size: 16px;
}
.son {
margin: 1em;
font-size: 1em;
}
</style>
</head>
<body>
<div class="father">
This is the Father element
<div class="son">
This is Son element
</div>
</div>
</body>
</html>
上面的输出中有一个父元素和一个子元素。子元素的大小与输出中的父元素相同。
rem 单位
rem 单位相对于元素根(即 html 元素)的字体大小。如果 <html> 没有指定字体大小，则使用浏览器的默认值，不考虑父元素，只考虑根元素。
示例
我们将子元素的字体大小保持为 50px，然后将元素的边距设置为 40px。与 em 不同，rem 单位的大小对于所有声明都是相对的。
在下面的示例中，我们首先使用根元素，然后创建父元素和子元素。然后，我们将根元素的字体大小设置为 18px，将父元素的字体大小设置为 15px。然后，我们将子元素的字体大小设置为 1.5rem，这意味着其大小是根元素大小的两倍，而不是父元素大小的两倍。让我们看看输出结果，看看 rem 单位的作用是什么。
<!DOCTYPE html>
<html lang="en">
<head>
<title>The difference between em and rem units</title>
<style>
html {
font-size: 18px;
}
.son {
font-size: 2rem;
margin: 1.5rem;
}
.father {
font-size: 13px;
}
</style>
</head>
<body>
<div class="father">
This is parent
<div class="son">
This is Child in rem unit system
</div>
</div>
</body>
</html>
从上面的输出中可以看出，子元素不是父元素的两倍，而是根元素的两倍。
单位 em 是相对于其最近父元素的字体大小的，它可以产生复合效果。rem 单位是相对于 HTML 根元素的字体大小的，但不会产生复合效果。
CSS 中的 Em 与 Rem 单位
单位包括 em、vh、vw 和 rem。相对单位也称为可伸缩单位，在网站的响应速度中起着重要作用。em 和 rem 单位都是可伸缩的，也是相对的。 em 单位相对于 HTML 文档中父元素的字体大小，而 rem 单位相对于整个文档的字体根元素。
结论
em 和 rem 单位的区别在于，em 单位相对于父元素(元素)，而 rem 单位相对于 <html> 根元素。这两个单位都属于相对单位，它们有助于提高网站的响应速度。这些单位有助于设置某些元素的大小。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
