rem 与 em - 你需要知道的一切
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
介绍
CSS是任何网站设计的重要组成部分，但要理解其使用技巧却并非易事。其中最重要的一点是理解CSS中rem和em的区别，以及何时应该使用哪一种。
对于希望创建灵活、响应迅速且易于维护和修改的网页的 Web 开发人员来说，了解这两个单元之间的区别至关重要。这也有助于您的网站符合当前的 Web 无障碍指南。
本文将全面介绍 em 和 rem 这两个值，包括它们的区别、使用场景和方法，以及它们的实际应用示例。读完本文后，您应该能够透彻理解这两个值。事不宜迟，让我们马上开始吧。
本文将介绍以下步骤：
- CSS 中何时使用 em 和 rem 单位
先决条件
本文假设读者已具备扎实的 CSS 基础。虽然你不需要成为 CSS 大神（你好，Kevin Powell），但如果你对基本的 CSS 术语不感到困惑，那将对你有所帮助。
CSS 中的 em 和 rem 单位
在CSS中指定长度时，我们有很多选择。所有用于指定CSS长度的单位都属于两大类。
绝对长度：顾名思义，绝对长度是绝对的；它们是固定的，不随任何因素变化。这意味着无论发生什么，它们的大小都保持不变。绝对长度单位包括厘米 (cm)、毫米 (mm)、英寸 (in)、像素 (px)、磅 (pts) 和片 (pc)。相对长度
：相对长度单位是指相对于另一个单位的长度，也就是说，它们会根据其他指定的单位或元素而变化。相对长度单位包括百分比 (%)、最大垂直高度 (vmax)、最小垂直高度 (vmin)、垂直高度 (vh)、垂直宽度 (vw)、通道 (ch)、扩展度 (ex)，以及我们将要讨论的单位：em 和 rem。
如果您想了解更多关于这些单元的信息，可以点击这里。现在让我们来看看我们此行的目的——两个单元。
什么是 CSS em
正如我上面所说，CSS 中的 em 单位是一种相对计量单位，用于调整网页元素的大小，主要是字体大小。由于它是相对于父元素而言的，因此 1 em 等于父元素中设置的字体大小。
这意味着，如果您将父级 div 的字体大小设置为 20px，并将子级 div 的字体大小设置为 2em，则子级 div 的字体大小将等于 40px。以下是一个示例。
首先，我们来编写HTML代码。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
</body>
</html>
Next, the CSS.
.parent{
font-size: 20px;
}
.child{
font-size: 2em;
}
p {
font-size: 1.5em;
}
这样我们就能得到这个。
em 单位非常实用，因为它允许您根据先前元素的字体大小调整页面上其他元素的大小，从而有助于保持一致的视觉层次结构。这对于创建易于视力障碍用户阅读的无障碍网站非常有用。
需要注意的是，如果您不指定父元素的值，则浏览器会使用默认值作为父元素。
p {
font-size: 1.5em;
}
在这个例子中，font-size 属性设置为 1.5em，这意味着<p>如果没有直接的父元素，元素中的文本大小将是浏览器默认字体大小的 1.5 倍。
由于大多数浏览器会根据屏幕尺寸缩放其默认字体大小，因此您可以创建灵活且响应迅速的布局，以适应不同的屏幕和字体大小。
使用适当的 CSS 属性，em 单位也可以用来设置其他元素的大小，例如边距、内边距和边框。
什么是 CSS rem
既然我们已经了解了 em 是什么，接下来看看 rem。rem 是 CSS 中另一种长度单位，代表“根 em”。由于我们知道 em 等于当前字体的磅值，我们可以推断“根 em”指的是根元素的字体大小，通常是 <div> 元素<html>。
感到困惑？让我们进一步解释一下。
与 em 类似，rem 的大小也继承自父元素，但 rem 所参照的父元素并非其上方的 div 或 section，而是包裹它的第一个元素，即 html 元素。让我们用之前的代码举个例子。同样的 html 代码，只是多了一个 div。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
</body>
</html>
接下来，我们将把以下 CSS 代码添加到我们的 CSS 文件中。
html{
font-size: 30px;
}
.child-2{
font-size: 2rem;
}
结果会是这样。
如您所见，尽管 child-2 div 位于另一个 div 内，但它仍然会追溯到 html 元素以继承其字体大小。
使用“rem”单位可以更灵活地调整页面上元素的大小，因为如果更改根元素的字体大小，所有使用“rem”单位调整大小的元素都会自动更新以保持其相对大小。
如果您想稍微修改一下上面的代码，这里有一个 Codepen 链接。
em 和 rem 单位的区别
现在，您应该已经知道 em 和 rem 之间的区别了，但为了清楚起见，我想重申一下这两个值之间的区别。
在 CSS 中，rem 单位仅相对于文档的根元素，而 em 单位仅相对于目标元素的直接父元素。这意味着 em 尺寸继承自父元素，而 rem 尺寸仅继承自根元素。
CSS中何时使用em和rem单位
对于字体大小、边距和内边距等全局值，使用 rem 单位是一个好主意，尤其是在你想为整个文档指定字体大小并使其均匀缩放而不是受父元素字体大小影响时。
em 更适合用于指定特定元素及其子元素的值。这样可以创建一致且灵活的布局，并能很好地适应不同的屏幕尺寸和字体大小。
在 CSS 中使用 em 和 rem 单位的潜在问题：
em 和 rem 是目前指定长度的最佳单位，但就像生活中所有事物一样，它们并非完美无缺。以下是使用 em 和 rem 时可能会遇到的一些问题：
- 复杂的计算：使用 em 和 rem 单位会导致复杂的计算，尤其是在涉及嵌套元素时。这会使准确预测和控制页面上元素的大小变得困难。
- 继承问题：由于 em 单位是相对于其父元素的字体大小而言的，因此很难理解和控制页面上各元素大小的继承方式。这可能会导致意想不到的结果，需要额外的调试才能解决。
- 性能问题：在极少数情况下，使用 em 和 rem 单位可能会对性能产生负面影响，尤其是在与复杂的计算结合使用或在页面上过度使用时。
总的来说，虽然 em 和 rem 单元在某些情况下可能有所帮助，但仔细考虑它们的潜在缺点以及它们是否是您项目的最佳选择非常重要。
你的CRUD应用需要服务器状态管理吗？
隆重推出这款基于 React 的无头解决方案，助您构建简洁高效的CRUD应用。有了 refine，您可以确保代码库始终保持整洁，告别冗余代码。
尝试改进以快速构建您的下一个CRUD项目，无论是管理面板、仪表板、内部工具还是店面。
文章来源：https://dev.to/refine/rem-vs-em-everything-you-need-to-know-5342