你可能不会在晚上梦到 CSS 元素的大小，但如果你正在构建一个网站或应用程序，这个话题绝对值得思考。
有些 CSS 单元能很好地配合你的响应式设计，而另一些则可能表现出反叛的倾向。如果能分辨出不同的字符，就能省去很多麻烦。
比如 REM 和 EM 的搭配。你应该使用哪一种，为什么？
在接下来的几段中，我们将为您揭晓答案！
REM 与 EM 简述
如果您想快速找到答案，这里有一个简短的答案：
- REM：该单元基于根元素（通常是
<html>标签）。无论页面上发生了什么，你的尺寸都将保持一致。 - EM：该单元向上寻求指导。如果父元素发生变化，你的尺寸也会跟着变化。
如果你想记住两者的区别，请记住 REM 中的 “R” 代表根。
注：为什么两个单位都以 “EM” 结尾？这不是缩写。早在所有文字都是印刷品的时候，排字工人就用大写字母 M 的宽度作为文字大小的基准。很有趣吧？
那么，你应该使用哪一个呢？
这要看情况。
如果你想让文字适应周围的环境，EM 可能是更好的选择。但如果你希望整个网站的文字大小保持一致，就应该改用 REM。
为什么？
- EM：更灵活，但一不小心就会乱套。
- REM：大小一致，非常适合响应式设计。
还在困惑吗？别担心，我们马上会深入探讨。
现在只需记住这一点： 对于大多数网站来说，REM 通常是更安全的选择。
了解 REM 和 EM
好吧，让我们来深入了解一下。
REM 和 EM 都是相对单位。这意味着它们 相对 于特定的尺度保持相同的大小 。
这种尺寸在响应式设计中起着关键作用。
绝对尺寸（如 px）始终保持不变，这意味着文字在台式机上看起来很小，而在手机上却很大。相比之下，相对单位可以适应不同的设备和布局。
在数字环境中，REM 和 EM 仍主要用于测量文本。不过，您也可以将这些单位用于以下方面
- 边距
- 填充
- 宽度和高度
- 行高
- 边框属性
- 框阴影
- 定位
- 媒体查询
换句话说，只要你想在设计中灵活调整大小，REM 和 EM 就能派上用场。
好了，这两个单元的共同点就介绍到这里。
现在，让我们仔细看看它们各自的独特之处。
了解 REM
REM 代表 “root em”。使用该单位时，您要定义的是相对于根元素（通常是 <html> 标记）的字体大小而言，某些内容应该有多大。
大多数浏览器默认根元素的字体大小为16px。不过，最好使用 CSS 来定义默认字体大小。
您可以这样做
html { font-size: 16px; /* Your base font size */ }
无论您选择的字体大小是多少，都会变成 1rem。这就是整个页面的新基线。
相对于您选择的默认值，任何增大或减小的数字都会改变目标元素的大小。
要解释清楚有点复杂，下面是一个简单的例子：
html { font-size: 16px; /* Your base font size */ }
body { font-size: 1.2rem; /* 19.2px */ }
h1 { font-size: 2.4rem; /* 38.4px */ }
在这种情况下，我们将 <html> 标记的字体大小定义为 16px。这就是我们的基准值 1rem。
我们希望正文文本比它大一点。因此，我们将 <body> 字体大小设置为 1.2rem。这就是基线的 120%。
页面的主标题需要大一些。通过将 <h1> 字体大小设置为 2.4rem，我们可以使标题的大小达到基线的 240%。
最终的结果会是这样的：
为什么使用 REM？
该系统有哪些优势？
在 CSS 中，REM 设备具有一些相当不错的优点：
- 真正的一致性：所有内容都会根据根大小按比例缩放，因此您的设计在任何设备上都会呈现您想要的效果。
- 响应性：按比例缩放意味着您的网站或应用程序可以适应各种设备。
- 易于维护：当您的所有样式都基于相同的根设置时，就很容易根据需要进行全面更改–您不需要访问每一个元素并手动更改字体大小。这也为您节省了大量时间。
- 极大的可访问性：很多人实际上都会更改浏览器的默认字体大小，以方便阅读文本。通过使用 REM 大小，您的设计可以适应这些用户的偏好。
当然，这并不全是阳光和彩虹。也有一些缺点：
- 第三方通配符：如果你的网站包含嵌入式内容，你可能会发现文本和其他元素并不遵循你的 REM 规则。
- 计算困难：要计算出 1.2rem 究竟有多大，需要一些数学计算。
- 权力越大，责任越大：当你可以如此轻松地改变整个网站的文字大小时，你需要谨慎编辑，以避免整个网站的设计灾难！
一般来说，大多数项目都应使用 REM。它比 EM 大小更容易处理，结果也更容易预测。
不过，有时 EM 也很有用。
了解 EM
EM 是一个棘手的东西。该单元基于其父元素的字体大小–就像变色龙适应周围环境一样。
当你开始嵌套时，混乱就开始了。大多数元素都会从父元素那里继承默认字体大小。但如果父元素也使用 EM 大小呢？很容易就会出现比例混乱的情况。
下面是一个简单的例子：
假设你有一个包含 <div> 的页面。在该框内，我们有一个 <p> 标签，其中包含一些文本。
<html> <div> <p>Some text here.</p> </div> </html>
现在，看看这个 HTML 代码段的 CSS：
html { font-size: 16px; /* Starting default size */ }
div { font-size: 1.2em; /* 19.2px */ }
p { font-size: 1.2em; /* 23.04px */ }
我们首先定义了整个页面的默认字体大小。到目前为止，一切顺利。
接下来，我们规定 <div> 内容的字体大小应为 1.2em。换句话说，我们的文本应该是父元素默认值的 120%。
最后，我们还将 <p> 的字体大小设为 1.2em。
等一下！以像素为单位，文字大小明显增大。
这是为什么呢？
<p> 元素查看了其父 <div> 的字体大小 19.2px，并将其作为默认大小。因为我们要求的是 1.2em，所以我们得到的文字是默认大小的 120%。
使用 EM 单元时很容易出现这类错误。
EM 非常适合特定尺寸
除了缺点之外，EM 单元对于特定组件的大小也非常有用。
假设您想创建一个按钮，它在父元素中占据的空间始终大致相同。
您的 HTML 代码可能是
<button class='button'>Click Me</button>
要设置按钮的样式，您可以使用 EM 单位来设置 font-size 和 padding。
CSS 将如下所示：
.button {
font-size: 1em; /* Size relative to the parent text size */
padding: 0.5em 1em; /* Padding scales with the font size */
}
上面的代码为我们提供了一个简单的按钮，并在文字周围加了一点衬垫。
如果父元素的字体大小向上缩放，按钮的字体大小和填充也会跟着向上缩放。
这样，即使改变设备或缩放级别，也能在父元素中保持相同的视觉平衡。
为什么要使用 EM？
既然有这么多困惑，为什么还要使用 EM 呢？
嗯，它确实有一些好处：
- 上下文缩放：元素根据其父元素的大小进行缩放，让你对整个设计的大小控制更加细致入微。
- 基于组件的设计：EM 单元非常适合创建独立的、可重复使用的、保持相同比例的组件。
- 精确控制：您可以在每个文档结构层次上对尺寸进行微调，而无需进行全面更改。
- 反应灵敏：与 REM 一样，EM 单元可以让你的设计适应不同的屏幕尺寸和用户偏好。
正如我们所看到的，它也有一些缺点：
- 复合效应：嵌套元素可能会导致意想不到的尺寸，因为 EM 值会开始叠加。
- 维护难题：更改父元素的字体大小会影响所有子元素，这可能会导致意想不到的后果，例如正文文字过大，标题过小。
- 大型项目的复杂性：随着项目的增长，跟踪所有相对大小可能会变得非常具有挑战性。
总之，EM 对于基于组件的设计以及需要精确控制元素关系时非常有用。它比基于像素的尺寸更灵活，但需要比 REM 更仔细的规划。
REM 还是 EM：您应该使用哪一种？
好了，以上就是很多有趣的信息。不过，如果你正在制作一些东西，你只需要知道该使用哪个 CSS 单元。
以下是我们的结论：
- 对于大多数项目来说，REM 是更好的选择，因为它更具可扩展性，也能提供更好的控制。
- 对于涉及嵌套样式的特定情况，EM 是一种有价值的工具。
值得注意的是，REM 和 EM 一般都比 px 等绝对单位更适合现代设计。
与视口单位（vh/vw）和百分比（%）等其他相对单位相比，REM 和 EM 也更适用于调整文字大小。
让我们从鹰眼的角度来看看 REM 与 EM 的对比：
| 特征 | REM | EM |
| 继承性 | 与 root 要素保持一致 | 相对于父元素 |
| 可扩展性 | 优秀 | 更有限 |
| 复杂性 | 较低，因为一致性 | 由于上下文大小的影响而更高 |
| 可维护性 | 简单–根元素尺寸的变化是级 | 嵌套元素可能更棘手 |
| 可访问性 | 与用户偏好配合良好 | 可能需要调整 |
| 最适合 | 全局间距和布局 | 特定组件缩放 |
常见问题解答
本指南应该已经消除了围绕这两个非常相似的单位的大部分困惑。
但如果你仍有疑问，这里有你需要知道的！
响应式设计应该使用 REM 还是 EM？
对于响应式设计来说，REM 通常是更好的选择，因为它可以让你创建适应不同屏幕尺寸的一致且可扩展的布局。
唯一的例外是当你想创建离散单元时，所有元素都保持相同的尺寸比例。
使用 EM 单元时如何避免复杂性？
为避免 EM 单元的复杂性，请尽量限制元素的嵌套。在全局大小调整中使用 REM，而在特定组件内的细微调整中使用 EM。
REM 有推荐的基本字体大小吗？
虽然没有严格的规定，但 REM 的常用基本字体大小为 16px。不过，您也可以根据自己的设计偏好和可访问性要求选择任意值。
深入了解 CSS
想进一步了解数字设计？我们有大量优秀的 CSS 学习资源：
响应式设计的重要性
正如我们在本指南开头提到的，CSS 单元是一个经常被忽视的组件。
然而，如果你想创建一个在任何设备上都美观大方、适合所有用户使用的网站或应用程序，那么考虑设计细节就显得尤为重要。
REM 还是 EM 的争论最终并不重要–最重要的是您的网站易于访问、响应迅速且易于使用！
评论留言