为什么要使用em而不是px？

Question

为什么要使用em而不是px？

cssfont-size

856

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

- Spoike

2

就算不值钱，这里是CSS中不同单位的定义：http://www.w3.org/TR/css3-values/#lengths。 - Ryan

15个回答

153

我有一台小型笔记本电脑，分辨率很高，必须将Firefox的文本缩放设置为120％才能阅读而不用眯眼。

许多网站都存在问题。布局变得混乱不堪，按钮中的文字被切成一半或完全消失。即使stackoverflow.com也受到了影响：

Firefox 120%文本缩放截图

请注意上方的按钮和页面选项卡重叠。如果使用em单位而不是px，则不会出现问题。

- flodin

17

在Firefox浏览器中，您可以在查看(View)菜单中选择“缩放(Zoom)”->“仅缩放文本(Zoom Text Only)”，然后像平常一样进行缩放，这样可以只缩放文本而不影响图片。 - thomasrutter

4

+1个好点。虽然在处理大分辨率时，您可以将屏幕设置为以120dpi显示文本，而不是标准的96分辨率。 - Spoike

5

@Spoike：我想这样做，但是Firefox不支持系统DPI设置。请参见https://bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524。 - flodin

7

@Juan：这是因为他们使用最简单的缩放方法：缩放整个页面。但这意味着在150%缩放时，1000像素宽的页面变成了1500像素宽。这是网页和浏览器开发人员最简单的缩放方式。不幸的是，这并不是很用户友好。这就是为什么其他浏览器采用文本缩放来放大内容而不更改布局的原因。但这意味着网页开发人员需要基本上为各种字体大小设计其布局，这大大限制了你可以进行的设计方案。要使一个网站在16pt字体和48pt字体下看起来好看相当困难。 - Lèse majesté

2

@Lesemajeste并没有像“缩放”应该做的那样扩展整个页面。开发者难道不应该告诉特定用户去适应或者不要访问吗？我永远不会为16pt和48pt字体考虑构建单个页面。那只是愚蠢的，正如你所指出的，非常限制布局。我认为FF想要为纯文本制作一个特殊的缩放功能很好，但我不会以此为设计目标。 - user1934286

显示剩余10条评论

115

我问这个问题的原因是我忘记了如何使用em作为CSS中的单位，因为有一段时间我一直在愉快地进行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>

一个简单的实现方式是，定义 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 的设计几乎相同，正如 flodin 指出的那样。这是因为盒子的宽度将保持不变，因为它被锁定为50px。

使用 em 代替

更明智的方法是使用 em 来定义宽度：

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

80

现在这种说法是不正确的。在任何现代浏览器中按下“Ctrl+”和“Ctrl-”都会缩放像素值。这种情况已经持续了一段时间。 - YemSalat

1

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

2

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

4

@spoike，因为YemSalat的评论所述，这显然不再是真实的，所以我会将其下降评分。 - RayLoveless

2

为什么@OliverDixon？我现在经常使用相对单位CSS。rem, em, ch等等。 - Spoike

显示剩余5条评论

60

这里来自thomasrutter的最佳回答是关于em的答案正确。但是他对像素大小非常错误。即使它已经过时，我也不能让它未经辩论就这样存在。

电脑屏幕通常不是96dpi！（或ppi，如果您想严谨一些。）

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

证明：画一条线，长960个像素。用物理尺子测量它。是10英寸吗？不是吗？将您的笔记本电脑连接到电视上。现在线长度为10英寸吗？还是不是？在您的iPhone上显示该行。大小还是一样吗？为什么不是？

到底谁发明了96dpi计算机屏幕神话？（一些宗教信仰操作72dpi神话。但同样是错的。）

- Vbakke

4

想要了解px的外观，可以想象一下20世纪90年代的CRT电脑显示器：它能显示的最小点的大小约为1/100英寸（0.25毫米）左右。px单位得名于这些屏幕像素。 - Jay

4

所有的绝对测量单位都严格相互关联；也就是说，1英寸始终等于96像素，就像1英寸始终等于72点一样。（请注意，在讨论基于屏幕的媒体时，1英寸几乎从来不是实际的物理英寸）我认为得票最高的答案没有涉及物理英寸。这些关系是在不同的绝对尺寸方案之间进行比较，例如英寸和磅。例如，扩展您的“证明”，如果我画一条1英寸的线，它会在物理上测量1英寸吗？ - Saumitra R. Bhave

7

“px”是相对于“参考像素”而言的大小，而不是你所说的屏幕上的像素。你可能不喜欢这个事实，但拿出你的尺子也无法改变它，也不能回答问题。参考像素是指在像素密度为96dpi且距离读者一臂之遥的设备上一个像素的视觉角度。对于一个名义上的28英寸的手臂长度，视觉角度大约为0.0213度。”。 - underscore_d

+1 对于指出一些并不那么无关紧要的事情表示赞赏。正如@underscore_d所提到的，px并不意味着与设备像素相同。但现实是，直到今天（2023年），我们在创建能够在所有屏幕上显示同样可读的文本的网站和应用程序方面仍然存在许多问题。这是因为我们仍然有各种各样的设备，其中ppi、尺寸和dppx几乎无法符合“视觉角度约为0.0213°”的建议。 - undefined

55

它对于需要根据字体大小进行缩放的所有内容都很有用。

在实现通过缩放字体大小进行缩放的浏览器上尤其有用。因此，如果您使用em对所有元素进行大小调整，则它们将相应地进行缩放。

- DR

108

现今，所有现代浏览器通过等比缩放所有绝对单位来实现缩放，而不仅仅是缩放字体大小。请注意，这个答案是在2009年写的，当时情况没有现在普遍实行的那么普遍。 - thomasrutter

23

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

这导致了两个相关的问题：

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

- Henrik Paul

我只是在寻找一个计算公式 :-) 或许加上一个反向的例子会更好，比如对于一个16像素字体，2px等于0.125em。 - Wolf

11

使用px来精确定位图形元素。使用em来测量与文本元素（如行高等）相关的位置和间距。px是像素精确的，em可以根据使用的字体动态改变。

- Scott Evernden

它确实存在，但不符合WCAG 2.0最低要求：http://www.w3.org/WAI/WCAG20/quickref/Overview.php - 1.4.4的充分技术。 - meo

10

例子：

代码： body{font-size:10px;} //保持所有大小都正确，将此值更改为例如该值的1.4倍

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

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

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

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

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

…

body

1

2

3

4

5

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

10×2=20 10×1.6=16 等等

您可以将基础值设置为8像素...所以 8×2=16 8×1.6=12.8 //浏览器可能进行四舍五入

- Muhammad Usman Ghani

3

最好添加一张图示效果。 - Wolf

8

一个非常实用的原因是，如果使用px指定字体大小，IE 6不允许你调整字体大小，但如果使用相对单位如em或百分比，则可以。不允许用户调整字体大小会严重影响可访问性。尽管它正在衰落，但仍有很多IE 6用户存在。

- John Topley

1

请注意，IE7和IE8仍然无法调整以像素为指定的字体大小（通过“页面>文本大小”）。但是，IE7添加了页面缩放（“页面>缩放”），可以缩放整个页面，包括文本，显然。 - mercator

1

比页面缩放更好的是使用键盘上的[CTRL]+[-]或[+]键在IE7+、Chrome和Firefox中进行全页缩放，这样就可以避免大多数尝试更改字体大小时遇到的问题。 - Rich Turner

1

2017年，全球几乎没有电脑使用IE6。 - Michael

4

因此答案和其他评论是在2009年撰写的，这就是为什么......哈哈 - Chev

5

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

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

在这种情况下，当网页在Google Chrome中打开时，Chrome会将font-size设置为HTML元素，尝试更改它以查看具有rem/em单位字体的网页上的效果。

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

因此，当您想要固定大小时，请使用px，而当您想要大小自适应/动态到系统大小时，请使用rem/em。

- thisshri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thomasrutter · Accepted Answer

说一个比另一个更好的选择是错误的（否则它们不会在规范中各自拥有用途）。甚至值得注意的是，Stack Overflow广泛使用px单位。这并不是问题所认为的不好的选择。

单位的定义

px是一个绝对的度量单位（类似于in，pt或cm），也恰好是1/96英寸单位（稍后解释为什么）。因为它是一个绝对度量，所以它可以用于任何你想要定义为特定大小而不是相对于其他东西（如浏览器窗口大小或字体大小）的大小的情况。

像所有其他绝对单位一样，px单位不随浏览器窗口的宽度而缩放。因此，如果您的整个页面设计使用绝对单位（如px）而不是%，它将不会根据浏览器的宽度进行调整。这并不是本质上好或坏的，只是设计师在忠实于确切大小和不灵活性之间做出的选择，或者在拉伸过程中不坚持确切大小。网站通常会同时包含固定大小和可伸缩大小的对象。

固定大小的元素经常需要被加入到页面中，例如广告横幅、标志或图标等。这确保您几乎总是需要至少一些基于像素的度量单位在设计中。例如，图像默认会按比例缩放，以使每个像素的大小为1px，因此如果您围绕着一个图像进行设计，您将需要使用px单位。对于精确的字体大小和边框宽度，它也非常有用，由于四舍五入，对于大多数屏幕而言，使用px单位最合适。
所有绝对度量都彼此严格相关; 也就是说, 1英寸 总是等于 96像素, 就像 1英寸 总是等于 72pt. (需要注意的是，当涉及基于屏幕的媒体时，1英寸 实际上几乎从不是一个物理英寸) 所有绝对度量假定标称屏幕分辨率为96ppi，标称视距为桌面监视器，在这样的屏幕上，一个 px 将等于屏幕上一个物理像素和一个 in 将等于96个物理像素。在像素密度或视距差异显着的屏幕上，或者如果用户使用浏览器缩放功能缩放页面，则 px 不再必然关联到物理像素。 em 不是绝对单位-它是相对于当前选择的字体大小的单位。除非您使用绝对单位（如 px 或 pt) 覆盖了字体样式，否则如果用户已经进行了选择，这将受到用户浏览器或操作系统中字体选择的影响，因此使用 em 作为一般的长度单位是没有意义的，除非您特别希望它随字体大小的变化而变化。
当您希望某个东西的大小取决于当前字体大小时，请使用 em。 rem 类似于 em，但是它相对于文档的基础字体大小（具体来说，是根元素的字体大小），而不是给定给当前元素的字体大小。 % 也是一种相对单位，在这种情况下，相对于父元素的高度或宽度。如果你的设计不依赖于特定的像素大小来设置其大小，那么它们是一个很好的替代方案来设置设计的总宽度。
在设计中使用 % 单位可以使您的设计适应屏幕/设备的宽度，而使用像 px 这样的绝对单位则不行。
vh、vw、vmin 和 vmax 是像 % 一样的相对单位，但它们是相对于视口（窗口中可见区域的大小）的大小而不是父元素的大小。分别相对于视口的高度、宽度、较小值和较大值。