为什么 em 而不是 px？

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

说一个是比另一个更好的选择是错误的（或两者都不会在规范中给出自己的目的）。甚至值得注意的是 StackOverflow 广泛使用 px 单元。 Spoike 被告知这不是一个糟糕的选择。

单位的定义

px为测量的绝对单位（如在 ，Pt或厘米），其也恰好是一个 1/96 在单元（更为什么更高版本）。因为它是绝对测量，所以可以在任何时候使用它来定义特定大小的东西，而不是与浏览器窗口的大小或字体大小等其他东西成比例。
与所有其他绝对单位一样， px单位不会根据浏览器窗口的宽度进行缩放。因此，如果整个页面设计使用绝对单位（如px而不是％），则它将无法适应浏览器的宽度。这本身并不是好的或坏的，只是设计师在坚持精确尺寸和不灵活与拉伸之间需要做出的选择，但在此过程中不遵守确切的尺寸。对于站点来说，通常会混合使用固定大小和灵活大小的对象。
固定大小的元素通常需要合并到页面中 - 例如广告横幅，徽标或图标。这可确保您在设计中几乎总是需要至少一些基于 px 的测量。例如，图像将（默认情况下）缩放，使得每个像素的大小为 1 * px *，因此如果您围绕图像进行设计，则需要px单位。它对于精确的字体大小调整和边框宽度也非常有用，由于四舍五入，因此对大多数屏幕使用px单位最有意义。
所有绝对测量值都是严格相关的; 也就是说， 1in 总是 96px ，就像1in 总是 72pt 一样 。（请注意，在谈论基于屏幕的媒体时， 1in几乎从不实际上是物理英寸）。所有绝对测量假定 96ppi 和桌面显示器的标称观看距离的标称屏幕分辨率，并且这样的屏幕上的一个像素将等于一个在将等于 96 个物理像素的屏幕上的一个物理像素和。在像素密度或观看距离上显着不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放了页面，则px将不再与物理像素相关。
em不是绝对单位 - 它是相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如px或pt ）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响（如果它们已经制作了字体样式），因此它没有意义使用 em 作为长度的一般单位，除非您特别希望它按字体大小比例缩放。
当您特别希望某些内容的大小取决于当前字体大小时，请使用em 。
％也是相对单位，在这种情况下，相对于父元素的高度或宽度。如果你的设计不依赖于特定的像素大小来设置它的大小，它们是px单元的一个很好的替代品，例如设计的总宽度。
在设计中使用％单位可以使您的设计适应屏幕 / 设备的宽度，而使用绝对单位（如px）则不然。

我有一台高分辨率的小型笔记本电脑，必须以 120％的文本缩放率运行 Firefox，才能在不眯眼的情况下阅读。

许多网站都存在此问题。布局变得全乱，按钮中的文字被切成两半或完全消失。甚至 stackoverflow.com 也会受到影响：

Firefox的屏幕截图，120％文字缩放

请注意顶部按钮和页面选项卡如何重叠。如果他们使用 em 单位而不是 px，那就没有问题了。

我之所以问这个问题的原因是我忘记了如何使用 em，因为有一段时间我在 CSS 中很开心。人们没有注意到我保持这个问题的一般性，因为我不是在谈论调整字体本身。我对如何在页面上的任何给定块元素上定义样式更感兴趣。

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

使用 px 定义宽度

这是一个说明性的例子。假设我们有一个 div 标签，我们想要变成一个时尚的日期框，我们可能有这样的 HTML 代码：

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

一个简单的实现将在 px date-box定义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 的设计几乎相同，就像flodin指出的那样。这是因为盒子的宽度与锁定为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

这样你就可以在日期框上设置一个流畅的设计，即盒子的大小与文本的大小一致，与日期框定义的字体大小成比例。在此示例中，font-size 在*定义为 10pt，并将大小增加到该字体大小的 2.5 倍。因此，当您在浏览器中调整字体大小时，该框的大小将是该字体大小的 2.5 倍。

协慌网