对 CSS 中的 rem 和 em 单位感到困惑？

CSS 中的 rem 和 em 单位让初学者感到困惑，

大多数初学者不理解这两个单位的正确含义，并且不假思索地使用它们，这给他们带来了很多问题。

em 和 rem 在 CSS 中都称为相对单位。

您可能已经使用 em 和 rem 单位一段时间了，但仍然可能不清楚在哪种情况下哪种单位最好。

em 是什么？

em 值等于该元素父元素的计算字体大小。例如，如果父元素的字体大小为 20 px，则 1em 等于 20px。

如果父元素中未指定字体大小，那么它将一直查找直到根元素。

根元素字体大小由浏览器提供，默认为16px。

在这种情况下，1em 等于 16px。

检查下面的挑战，然后跳到答案并了解它们的工作原理。

我们有三个 div，容器、父级和子级，分别指定字体大小为 1em、3em 和 2em。

子项的最终尺寸变为 96px，😅 复合的力量。

查看实例👇

让我们看看实际效果👇

em 与其直接或最近的父级字体大小有关，而 rem 仅与 Html（根）字体大小有关。

默认情况下，它是 16px，除非我们没有在 Html 元素中指定。

rem 值在指定以下值时不太方便

1rem = 16px

但是如果我们想使用 10px 则我们需要计算 rem 值，该值等于 0.625rem。

为了解决这个问题我们有一个技巧，将 Html 元素字体大小指定为 62.5%。

那么我们的 1rem 就变成了 10px，现在我们可以轻松计算尺寸了。

其实没有更好的单位，这完全取决于你的个人选择。有些人喜欢使用 rem 单位来保持一致性和可扩展性，

而有些人则喜欢在附近父元素的影响有意义的地方使用 em 单位。

我个人使用 rem 比 em 多，但要小心使用两者，当你不了解父母和孩子之间的关系时，em 就会成为一个麻烦，

我们已经看到了 em 中复合效应的例子。所以我想说使用 rem 比使用 em 要多。

如果您想计算 rem 和 em 的准确尺寸，那么pxtoem网站非常有用。

尝试这两个单元并了解它们的用例至关重要。我建议你尝试一下这两个单元，并了解它们各自的用途。