后端开发教程 - Java、Spring Boot 实战 - msg200.com
em 到底是什么？
em虽然在定义字体大小时使用或 是最佳实践rem，但开发人员常常不确定应该使用哪种字体，甚至不知道每种字体如何工作。在本文中，我们将介绍em和rem的含义以及它们的区别，以便您选择最适合您需求的字体。
在发布这篇博文之前，我在Twitter上做了一个小测验。以下是调查结果：
只有12%的人答对了。我知道em这很让我困惑，但我没想到它还让很多人困惑。所以，让我们深入探讨一下它们是什么em，rem以及它们是如何运作的。
电磁波
在 CSS 中，em是相对于元素字体大小的单位。如果元素没有指定字体大小，它将继承其父元素的字体大小。我喜欢将 理解em为“元素的测量单位”。
让我们以按钮为例。
button {
font-size: 2em;
padding: 1em;
}在此示例中，我们假设按钮继承了16px字体大小。这原本会生成1em= 16px。
到目前为止，一切都很好。
当我们将按钮的字体大小更改为 时2em，元素的字体大小会从 变为16px（32px或2em）。这也是合理的。令人困惑的是填充会发生什么。由于元素的新字体大小为32px，这会导致按钮的填充变为32px，或 的新值1em。
是的，CSS 很狂野。
快速眼动
rem，或称 root em，是相对于根 ( ) 元素字体大小的单位<html>，通常为16px。套用我自己的理解，em代表“根元素的测量值”。remrem
使用rem，更改元素的字体大小不会更改rem其他属性的值。它始终为1rem= 16px，或根元素的字体大小。（注意：html由于用户代理样式表设置了字体大小，因此覆盖元素的字体大小可能不是一个好主意。您可以在 Jens Oliver Meiert 的文章“用户代理样式表：基础知识和示例”中了解有关用户代理样式表的更多信息。）
让我们重新回顾一下之前的例子，但这次我们将使用rem。
button {
font-size: 2rem;
padding: 1rem;
}在这种情况下，字体大小（2rem）为32px，填充（1rem）为16px，这正是您所期望的。
那么我应该使用哪一个？
视情况而定！如果您对此感到担忧，我建议您自行研究，看看哪种方法最适合您的目的。
经过一些研究后，我更喜欢rem这样，这样我就不必担心元素的字体大小会发生意外的变化，特别是当我在许多其他开发人员接触过的系统中工作时。
📣大声说出来！ 📣 你主要喜欢用emorrem吗？为什么？如果你学到了什么，请告诉我！