为啥是 em 而不是 px？

Posted 2023-02-21

【中文标题】为啥是 em 而不是 px？

【英文标题】：Why em instead of px?为什么是 em 而不是 px？

【发布时间】：2010-10-11 04:55:45

【问题描述】：

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

【问题讨论】：

对于它的价值，这里是 CSS 中不同单位的定义：w3.org/TR/css3-values/#lengths。

【参考方案1】：

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

单位定义

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

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

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

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

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

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

% 也是一个相对单位，在这种情况下，相对于父元素的高度或宽度。如果您的设计不依赖特定像素大小来设置其大小，它们是 px 单位的一个很好的替代品，例如设计的总宽度。

在你的设计中使用 % 单位可以让你的设计适应屏幕/设备的宽度，而使用像 px 这样的绝对单位则不能。 p>

【讨论】：

没有办法在 em 和像素之间进行转换，除非您知道 'em' 的大小（以像素为单位），在这种情况下。这可能取决于该元素的继承字体大小，而这又取决于整个文档的字体大小，这可能取决于用户浏览器和/或操作系统中的字体大小设置。如果您的目标是特定的像素大小，请以像素为单位进行指定。也就是说，如果你想要 990px​​，那么就放 990px​​。如果像素是你想要的，为什么不使用它们呢？

嗯？我没有说任何与此相矛盾的话。我是说 px 单位用于什么以及 em 单位用于什么。您似乎暗示使用 px 单位通常是不好的。如果在您调整浏览器的默认字体大小时站点中断，则故障不是 px 单位，这是错误的假设。显然，网页设计师依赖于默认字体大小（通常是一个好主意），但基于对这个字体大小的错误假设创建了其余的布局，例如尝试将固定大小的图形元素与文本对齐，其中元素大小只匹配一种字体大小的文本。

没有错，也没有过于简单化。显然，如果您在实际 declare 字体大小的行中使用 em，则该行中的 em 不可能相对于同一元素的字体大小 after 该元素上的任何字体大小声明，因为它还不知道 - 所以它必须相对于该元素在 之前 具有字体大小属性的字体大小声明了相同的元素。由于任何其他行为实际上是不可能的，我看不出有任何歧义。

@TalhaSayed ，您将像素与 px 单位混淆了。它们不是一回事——阅读 CSS 规范。 px 单位是一个绝对单位，其意义与 in 单位、cm 单位或 pt 单位相同。

@thomasrutter，哇！我只是用谷歌搜索，是的，我不得不说我错了。这些年来，我不知道。我曾经认为 1 个像素 = 1 个“屏幕上的点”。我想我今天学到了一些新东西。

【参考方案2】：

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

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

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

【讨论】：

您也可以在 Firefox 中缩放文本，而不用在视图中缩放图像 -> 缩放 -> 仅缩放文本，然后正常缩放。

+1 好点。尽管对于大分辨率，您可以将屏幕设置设置为以 120 dpi 而不是标准的 96 分辨率显示文本

@Spoike：我愿意，但 Firefox 不支持系统 DPI 设置。见bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524

@Juan：那是因为他们使用最简单的缩放方法：缩放整个页面。但这意味着在 150% 缩放时，1000 像素宽的页面变为 1500 像素宽。这是 Web 和浏览器开发人员最简单的缩放方式。不幸的是，它不是很用户友好。这就是为什么其他浏览器具有仅放大内容而不更改布局的文本缩放功能。但这意味着 Web 开发人员基本上需要针对各种字体大小设计他们的布局，这极大地限制了您在设计方面可以做的事情。用 16pt 字体和 48pt 字体让网站看起来不错是相当困难的。

@Lesemajeste 没有缩放整个页面，实际上应该是“缩放”。开发人员是否必须告诉利基用户应对或不访问？我永远不会考虑 16pt 和 48pt 字体来构建单个页面。这只是愚蠢的，正如你所指出的，布局非常有限。我认为 FF 只想对文本进行特殊缩放是很棒的，但我不会考虑到这一点。

【参考方案3】：

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

正如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;

问题

但是，如果我们想在浏览器中放大文本的大小，设计就会中断。文本也会在框外流血，这与flodin 指出的 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 倍。

【讨论】：

我想知道：它将如何使用宽度百分比来适应网格系统？如果连续块的宽度为 100%，它会破坏它吗？

如今这不是真的。在任何现代浏览器中按下Ctrl+ 和Ctrl- 也会缩放像素值。这种情况已经有一段时间了。

@YemSalat 这也适用于在操作系统中调整 DPI 吗？

@Wolf，是的，但这是一种可怕的布局方式，不会给你带来任何好处，只会带来痛苦。

@spoike，反对这一点，因为正如 YemSalat 的评论所述，这显然不再正确

【参考方案4】：

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

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

像素没有固定的物理尺寸。 （是的，它仅在 一个 屏幕中固定，但在下一个屏幕中，像素很可能更大或更小，当然不是 1/96 英寸。） 证明 画一条 960 像素长的线。用物理尺测量它。是10英寸吗？没有..？ 将笔记本电脑连接到电视。现在是10英寸的线吗？还是不行？ 在你的 iPhone 上显示这条线。还是一样大？为什么不呢？

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

【讨论】：

> 要了解 px 的外观，请想象一下 1990 年代的 CRT 计算机显示器：它可以显示的最小点约为 1/100 英寸（0.25 毫米）或一点点更多的。 px 单位得名于这些屏幕像素。 -- 来自 W3C：w3.org/Style/Examples/007/units.en.html#units

所有绝对测量值都彼此严格相关；也就是说，1in 总是 *96px*，就像 1in 总是 *72pt*。 （请注意，在谈论基于屏幕的媒体时，1 英寸几乎从来都不是物理英寸） 我不认为投票最多的答案是在谈论物理英寸。这些关系是在不同的绝对大小方案之间，如 in 和 pt。例如。如果我画一条 1_in_ 的线，只是延长你的“证明”，它的物理尺寸会是 1 英寸吗？

-1 表示不正确、不相关的咆哮。 px 的大小是相对于参考像素，而不是您在此处所使用的屏幕上的像素。你可能不喜欢这样，但把你的尺子拿出来不会让它变得不那么重要，也不会有助于回答这个问题。 ***.com/questions/27382331/…"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."

【参考方案5】：

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

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

【讨论】：

如今，所有现代浏览器都通过平等缩放所有绝对单位来实现缩放，而不仅仅是缩放字体大小。请注意，这个答案是在 2009 年写的，当时情况比现在少。

【参考方案6】：

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

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

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

【讨论】：

我只是在寻找一个计算公式 :-) 也许添加一个反向示例也很好，例如 2px 是 0.125em 用于 16 像素字体。

【参考方案7】：

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

【讨论】：

是，但不符合 WCAG 2.0 最低要求：w3.org/WAI/WCAG20/quickref/Overview.php - 1.4.4 的足够技术

【参考方案8】：

示例：

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

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

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

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

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

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

…

身体

1

2

3

4

5

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

10×2=20 10×1.6=16 等

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

【讨论】：

最好加一张说明效果的图片。

【参考方案9】：

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

【讨论】：

请注意，IE7 和 IE8仍然 无法使用以像素为单位指定的字体大小调整文本大小（通过Page > Text Size）。但是，IE7 添加了页面缩放 (Page > Zoom)，它显然可以缩放整个页面，包括文本。

比 Page > Zoon，尝试在 IE7+、Chrome 和 Firefox 中按键盘上的 [CTRL] + [-] 或 [+] 键 - 整页缩放不会遇到大多数人尝试过的问题更改字体大小。

2017 年全球几乎没有电脑使用 IE6

@MichaelMay 因此，为什么答案和其他 cmets 是在 2009 年编写的……哈哈

【参考方案10】：

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

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

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

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

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

【参考方案11】：

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

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

您的图像仍应以 px 大小显示，但一般情况下，以 px 大小调整文本不被认为是一种好的形式。

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

【讨论】：

+1 流体网格实际上是我提出问题时所寻找的。 （另外，你们公司不应该升级到 IE7 吗？）

如果你问我，他们应该使用 Firefox，但实际上他们并没有问我。 :-)（IE7 会优于 6，但我不参与决策）

【参考方案12】：

如果您想使用 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 */

等等。

【讨论】：

这不是高度依赖于没有人触摸他们浏览器的自定义 css 设置吗？

是的，你应该设置font-size: 10px。 css-tricks.com/forums/discussion/1230/…

我更喜欢保留 font-size: 100% 并使用 mixins 来计算 em 值

【参考方案13】：

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

Traingamer 已经提供了neccessary links。

【参考方案14】：

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

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

【参考方案15】：

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

【讨论】：

请在您的答案中添加一些进一步的解释，以便其他人可以从中学习 - 特别是因为这是一个非常古老的问题，已经有大量的赞成答案