css - 为什么是 em 而不是 px？

Question

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

score 589 · Accepted Answer

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

单位的定义

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

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

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

所有绝对测量值都彼此严格相关；也就是说，1in总是96px，就像1in总是 72pt一样。（请注意，在谈论基于屏幕的媒体时， 1in几乎从来都不是物理英寸）。所有绝对测量都假定标称屏幕分辨率为 96ppi 和桌面显示器的标称观看距离，在这样的屏幕上 1 px将等于屏幕上的 1 个物理像素和 1 in 将等于 96 个物理像素。在像素密度或观看距离明显不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放了页面，px将不再与物理像素相关。
em不是一个绝对单位——它是一个相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如px或pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响（如果他们已经制作了字体），因此没有意义使用 em 作为一般长度单位，除非您特别希望它随着字体大小的缩放而缩放。

当您特别希望某物的大小取决于当前字体大小时，请使用em 。
rem类似于em，但它与文档（特别是根元素）的基本字体大小有关，而不是与当前元素的字体大小有关。
%也是一个相对单位，在这种情况下，相对于父元素的高度或宽度。如果您的设计不依赖特定像素大小来设置其大小，它们是px单位的一个很好的替代品，例如设计的总宽度。

在您的设计中使用%单位可以让您的设计适应屏幕/设备的宽度，而使用px等绝对单位则不能。
vh、vw、vmin和vmax是像%一样的相对单位，但它们是相对于视口的大小（窗口的可视区域的大小）而不是父元素的大小。它们分别与视口的高度、宽度、两者中的较小者和两者中的较大者相关。

score 148 · Accepted Answer

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

许多网站都有这个问题。布局变得乱码，按钮中的文本被切成两半或完全消失。甚至 stackoverflow.com 也深受其害：

Firefox 120% 文本缩放的屏幕截图

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

score 106 · Accepted Answer

我问这个问题的原因是我忘记了如何使用 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>

date-box一个简单的实现会以 px为单位定义类的宽度：

* { 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 倍。

score 60 · Accepted Answer

来自 thomasrutter 的最高投票答案在他对em的回应中是正确的。但是关于像素的大小是非常非常错误的。因此，即使它很旧，我也不能让它毫无争议。

电脑屏幕通常不是 96dpi！（或者 ppi，如果你想学究气的话。）

像素没有固定的物理尺寸。
（是的，它只固定在一个屏幕中，但在下一个屏幕中，像素很可能更大或更小，而且肯定不是 1/96 英寸。）

证明
画一条 960 像素长的线。用物理尺测量它。是10英寸吗？不..？
将笔记本电脑连接到电视。现在是10英寸的线吗？还没有？
在你的 iPhone 上显示这条线。还是一样大？为什么不？

到底是谁发明了 96dpi 的电脑屏幕神话？
（一些宗教以 72dpi 的神话运作。但同样错误。）

score 54 · Accepted Answer

它适用于必须根据字体大小进行缩放的所有内容。

它在通过缩放字体大小实现缩放的浏览器上特别有用。因此，如果您使用em它们调整所有元素的大小，它们会相应地缩放。

score 23 · Accepted Answer

因为 em ( http://en.wikipedia.org/wiki/Em_(typography) ) 与当前使用的字体大小成正比。如果字体大小是 16 磅，那么 1 个 em 就是 16 磅。如果您的字体大小为 16 像素（注意：与点不同），则 1 个 em 为 16 像素。

这导致了两个（相关的）事情：

如果您稍后选择在 CSS 中编辑字体大小，则很容易保持比例。
许多浏览器支持自定义字体大小，覆盖您的 CSS。如果您以像素为单位设计所有内容，那么您的布局可能会在这些情况下中断。但是，如果您使用 em，这些覆盖应该可以缓解这些问题。

score 10 · Accepted Answer

使用 px 精确放置图形元素。使用 em 进行测量，必须围绕文本元素（如行高等）进行定位和间距。px 是像素精确的，em 可以随着使用的字体动态变化

score 10 · Accepted Answer

例子：

代码：body{font-size:10px;} //保持10以下所有尺寸正确，更改此值，其余更改为例如此值的1.4

1{font-size:1.2em;} //12px

2{font-size:1.4em;} //14px

3{font-size:1.6em;} //16px

4{font-size:1.8em;} //18px

5{font-size:2em;} //20px

…</p>

身体

1

2

3

4

5

通过更改 body 中的值，其余部分会自动更改为基值的一种...</p>

10×2=20 10×1.6=16 等

您可以将基值设置为 8px... 所以 8×2=16 8×1.6=12.8 //可能会被浏览器四舍五入

score 8 · Accepted Answer

一个非常实际的原因是，如果使用 px 指定字体，IE 6 不允许您调整字体大小，而如果您使用相对单位（例如 em 或百分比）则可以。不允许用户调整字体大小对可访问性非常不利。尽管它在下降，但仍然有很多 IE 6 用户。

score 5 · Accepted Answer

像素是绝对单位，而rem/em是相对单位。更多信息：https ://drafts.csswg.org/css-values-3/

当您希望字体大小根据系统的字体大小自适应时，您应该使用相对单位，因为系统将font-size值提供给作为 HTML 元素的根元素。

在这种情况下，在谷歌浏览器中打开网页的情况下，font-sizeHTML 元素是由 Chrome 设置的，尝试更改它以查看对字体为rem/em单位的网页的效果。

如果您使用px作为字体的单位，则字体不会调整大小，而带有rem/em单位的字体会在您更改系统字体大小时调整大小。

因此px，当您希望大小固定时使用，当您希望大小自适应/动态地适应系统大小时使用rem/ 。em

score 2 · Accepted Answer

使用 em 或百分比的主要原因是允许用户在不破坏设计的情况下更改文本大小。如果您使用以 px 指定的字体进行设计，如果用户选择text size - large ，它们不会更改大小（在 IE 6 和其他版本中）。这对于有视觉障碍的用户来说是非常糟糕的。

有关此类设计的几个示例和文章（有无数种可供选择），请参阅最新一期的 A List Apart：Fluid Grids、较早的文章How to Size Text in CSS或 Dan Cederholm 的Bulletproof Web Design。

您的图像仍应以 px 大小显示，但一般来说，使用 px 调整文本大小并不是一种好的形式。

尽管我个人很鄙视 IE6，但它是目前唯一为我们财富 200 强公司的大部分用户批准的浏览器。

score 2 · Accepted Answer

如果您想使用 px 来指定字体大小，但仍然希望 em 通过将其放在 CSS 文件中提供的可用性，有一个简单的解决方案：

body {
  font-size: 62.5%;
}

现在像这样指定您p（和其他）标签：

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

等等。

score 0 · Accepted Answer

在 IE6 消失（来自您的站点）之前，您可能希望使用 em 来表示字体大小。当页面缩放（而不是文本缩放）成为标准行为时，Px 就可以了。

Traingamer 已经提供了必要的链接。

score -1 · Accepted Answer

普遍的共识是使用百分比来调整字体大小，因为它在浏览器/平台之间更加一致。

有趣的是，我一直使用 pt 来调整字体大小，并且我认为所有网站都使用它。您通常不会在其他应用程序（例如 Word）中使用 px 大小。我想这是因为它们是用于打印的 - 但在 Web 浏览器中的大小与在 Word 中的大小相同......

score -5 · Accepted Answer

避免 em 或 px 使用 rem 代替，因为它更容易找到计算值。但是在 em 和 px 之间，px 更好，因为 em 很难调试。