为什么是 em 而不是 px？

Question

我听说您应该在样式表中使用 em 而不是像素来定义大小和距离。所以问题是为什么在 CSS 中定义样式时我应该使用 em 而不是 px ？有没有一个很好的例子来说明这一点？

原文由 Spoike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我问这个问题的原因是我忘记了如何使用 em，因为有一段时间我在 CSS 中愉快地进行黑客攻击。人们没有注意到我将问题保持在一般性，因为我不是在谈论字体本身的大小。我对如何在页面上的 任何给定块元素 上定义样式更感兴趣。

正如 Henrik Paul 和其他人指出的那样，em 与元素中使用的字体大小成正比。在 px 中定义块元素的大小是一种常见的做法，但是，在浏览器中调整字体大小通常会破坏这种设计。调整字体大小通常使用快捷键 Ctrl + + 或 Ctrl + - 完成。因此，一个好的做法是改用 em。

使用 px 定义宽度

这是一个说明性示例。假设我们有一个 div-tag 想要变成一个时尚的日期框，我们可能有如下 HTML 代码：

 <div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

一个简单的实现将在 px 中定义 date-box 类的宽度：

 * { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

问题

但是，如果我们想在浏览器中放大文本的大小，设计就会中断。正如 弗洛丁 指出的那样，文本也会在框外流血，这与 SO 的设计所发生的情况几乎相同。这是因为盒子的宽度将保持与锁定到 50px 相同的大小。

改用 em

更聪明的方法是在 ems 中定义宽度：

 div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

这样，您就可以在日期框上进行流畅的设计，即该框将与文本一起按为日期框定义的字体大小成比例地变大。在此示例中，字体大小在 * 中定义为 10pt，并且将放大到该字体大小的 2.5 倍。因此，当您在浏览器中调整字体大小时，该框的大小将是该字体大小的 2.5 倍。

原文由 Spoike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

说一个比另一个更好的选择是错误的（或者两者都不会在规范中给出自己的目的）。甚至值得注意的是，Stack Overflow 广泛使用了 px 单位。这 并不是 问题所暗示的糟糕选择。

单位定义

• px 是一个绝对测量单位（如 in 、 pt 或 cm ），它也恰好是 in 单位的 1/96（稍后会详细介绍原因）。因为它是一个绝对测量值，所以任何时候您都可以使用它来定义特定大小，而不是与浏览器窗口大小或字体大小等其他内容成比例。

与所有其他绝对单位一样， px 单位不会根据浏览器窗口的宽度进行缩放。因此，如果您的整个页面设计使用绝对单位（例如 px 而不是 % ），它将无法适应浏览器的宽度。这本质上没有好坏之分，只是设计师需要在坚持精确尺寸和不灵活与拉伸但在此过程中不坚持精确尺寸之间做出选择。对于一个站点来说，混合使用固定大小和灵活大小的对象是很典型的。

固定大小的元素通常需要合并到页面中——例如广告横幅、徽标或图标。这确保您几乎总是需要在设计中至少进行 一些 基于 px 的测量。例如，图像将（默认情况下）缩放为每个像素大小为 1 px ，因此如果您围绕图像进行设计，则需要 px 单位。它对于精确调整字体大小和边框宽度也非常有用，由于四舍五入，对于大多数屏幕使用 px 单位最有意义。

所有绝对测量都彼此严格相关；也就是说， 1in 始终 为 96px ，就像 1in 始终 为 _72pt 一样_。 （请注意，在谈论基于屏幕的媒体时， 1 英寸几乎从来不是物理 _英寸_）。所有绝对测量均假定标称屏幕分辨率为 96ppi 和桌面显示器的标称观看距离，在这样的屏幕上，1 像素 等于屏幕上的一个 物理 像素，1 英寸 等于 96 个物理像素。在像素密度或观看距离明显不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放页面， px 将不再与物理像素相关。

• em 不是绝对单位——它是相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如 px 或 pt ）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响（如果他们已经制作了字体），因此它不会感觉使用 em 作为一般长度单位，除非您特别希望它随着字体大小的缩放而缩放。

当您特别希望某些内容的大小取决于当前字体大小时，请使用 em 。

• rem 类似于 em ，但它是相对于文档（特别是根元素）的基本字体大小，而不是相对于当前元素的字体大小。

• % 也是相对单位，在本例中，相对于父元素的高度或宽度。如果您的设计不依赖于特定像素大小来设置其大小，它们是设计总宽度等 px 单位的良好替代方案。

在您的设计中使用 % 单位可以让您的设计适应屏幕/设备的宽度，而使用绝对单位如 px 则不能。

• vh 、 vw 、 vmin 和 vmax 是相对单位，如 % ，但它们是相对于 视口 的大小（窗口可视区域的大小）而不是父元素。分别是相对于视口的高度，宽度，两者中较小的，两者中较大的。

原文由 thomasrutter 发布，翻译遵循 CC BY-SA 4.0 许可协议