细说 rem 与 em

  • 细说 rem 与 em
    • 1. CSS 中的 em 和 rem 单位
    • 2. CSS 中的 em
    • 3. CSS 中的 rem
    • 4. em 和 rem 的区别
    • 5. em 和 rem 的使用场景

细说 rem 与 em

CSS 是任何网站设计的关键部分，但理解如何使用它的细微差别可能是棘手的。本文我们将介绍 CSS 中的 rem 和 em，理解这两个单位之间的区别对于想要创建灵活、响应迅速、易于维护和修改的网页的 web 开发人员来说是至关重要的。

我们将了解 em 和 rem 的详细内容，它们的区别，何时以及如何使用它们，以及 em 和 rem 的实际例子。在本文的最后，你应该对这两个单位有一个详细的理解。废话不多说，让我们直接开始吧。

1. CSS 中的 em 和 rem 单位

在寻找在 CSS 中指定长度的方法时，我们有很多选择。所有在 CSS 中指定长度的单位都属于两类。

  • 绝对长度：绝对长度，顾名思义，是绝对的；它们是固定的，不与任何东西相对。这意味着无论发生什么，它们都是相同的尺寸。绝对长度包括 cm、mm、in、px、pts 和 pc。
  • 相对长度：相对长度是指相对于另一个单位指定长度的单位，也就是说，它们基于其他指定的单位或元素作出反应。它们包括 %、vmax、vmin、vh、vw、ch、ex，以及我们将要讨论的单位 em 和 rem。

现在让我们来看看我们来到这里的两个单位。

2. CSS 中的 em

就像上面说的，CSS 中的 em 单位是一个相对的测量单位，用于测量网页上元素的大小，主要是字体大小。因为它是相对于其父元素而言的，所以 1 个 em 等于父元素中设置的字体大小。

这意味着如果你将父 div 中的字体大小设置为 20px，并将子 div 的字体大小设置为 2em，那么子 div 中的字体大小将等于 40px。

这里有一个栗子。 首先，我们来写一下 HTML：

<div class="parent">I'm parent div set to 20px<div class="child">I'm the child div set to 2em, i.e 40px.</div></div>

接下来是 CSS：

.parent{font-size: 20px;}.child{font-size: 2em;}p {font-size: 1.5em;}

会得到如下结果：

em 单位很有用，因为它允许你根据之前所说的元素的字体大小来调整页面上的元素的大小，这有助于创建一个一致的视觉层次结构。这对创建无障碍网站很有帮助，可以让有视觉障碍的用户容易阅读。

需要注意的是，如果你没有指定父元素的值，浏览器的默认值会被当作父元素。

p {font-size: 1.5em;}

在这个例子中，font-size 属性被设置为 1.5em，意味着如果没有直接的父元素，

元素中的文字大小将是浏览器默认字体大小的 1.5 倍。

由于大多数浏览器都会根据屏幕的大小来调整其默认的字体大小，这使得你可以创建灵活的、响应式的布局，以适应不同的屏幕和字体大小。

另外em 单位也可以用来设置其他元素属性的大小，如 margin、padding和 border。

3. CSS 中的 rem

现在我们知道了什么是 em，我们来看看 rem。rem 是 CSS 中另一个测量长度的单位，它代表 root em。既然我们知道 em 等于当前字体的尺寸，我们就可以推断出 root em 是指根元素的字体尺寸，而根元素通常是指 元素。

和 em 一样，rem 也是从父元素那里继承它的大小，但 rem 看的父元素不是它上面的 div 或 section，而是围绕它的第一个元素，也就是 html 元素。让我们用前面的代码做一个例子。同样的 html 代码，只是多了一个 div。

<div class="parent">I'm parent div set to 20px<div class="child">I'm the child div set to 2em, i.e 40px.</div><div class="child-2">I'm the child div set to 2em, i.e 60px.</div></div>

接下来是我们的 CSS：

.parent{font-size: 20px;}.child{font-size: 2em;}p {font-size: 1.5em;}html{font-size: 30px;}.child-2{font-size: 2rem;}

会得到如下结果：

正如你所看到的，尽管 child-2 div 在另一个 div 里面，但它一直回到 html 元素来继承其字体大小。

使用 rem 单元可以使页面上元素的大小有更大的伸缩性和灵活性，因为如果你改变根元素的字体大小，所有用 rem 单元确定大小的元素都会自动更新，以保持它们的相对大小。

4. em 和 rem 的区别

现在，你已经知道了 em 和 rem 的区别，但为了清楚起见，我想重述一下这两个值的区别。 在 CSS 中，rem 单位只相对于文档的根元素，而 em 单位只相对于目标元素的直接父元素。这意味着 em 的大小是继承自父元素的，而 rem 的大小只继承自根元素。

5. em 和 rem 的使用场景

对于 font-size、margin 和 padding 等全局值来说，使用 rem 单位是个不错的主意，特别是如果你想为整个文档指定一个字体大小，并让它统一缩放，而不是受父元素字体大小的影响。

em 更适合用于特定于某个元素及其子元素的值。这允许你创建一个一致而灵活的布局，可以很好地适应不同的屏幕尺寸和字体大小。然而在 CSS 中使用 em 和 rem 单位的潜在问题，虽然 em 和 rem 是目前在指定长度时使用的最好的单位，但就像生活中的所有事情一样，它们并不完美。

以下是你在使用 em 和 rem 时可能遇到的几个问题：

  • 复杂的计算：使用 em 和 rem 单位会导致复杂的计算，特别是涉及到嵌套元素时。这可能导致难以准确预测和控制页面上元素的大小。
  • 继承性问题：因为 em 单位是相对于其父元素的字体大小而言的，所以很难理解和控制整个页面的大小是如何继承的。这可能会导致意外的结果，需要额外的调试来解决。
  • 性能问题：在一些非常罕见的情况下，使用 em 和 rem 单位可能会对性能产生负面影响，特别是当与复杂的计算相结合或在一个页面上使用过多时。

总的来说，虽然 em 和 rem 单位在某些情况下是挺好的，但重要的是要仔细考虑它们的潜在缺点，以及它们是否是你项目的最佳选择。

如果你到了这里，恭喜你！你现在知道了关于 em 和 rem 的所有知识，以及为什么我们需要它们。如果这篇文章对你有帮助，请你能一键三连。