小开

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

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

小开

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

小开

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

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

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

小开

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

许多网站都有这样的问题。布局变得乱七八糟，按钮中的文本被切成两半或完全消失。甚至stackoverflow.com也受到影响：

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

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

小开

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

单位的定义

px是一个绝对度量单位（如在、pt或厘米），恰好也是在单位的1/96（稍后会详细说明原因）。因为它是一个绝对度量，所以可以在任何时候使用它来定义特定的大小，而不是与浏览器窗口的大小或字体大小等其他东西成比例。
像所有其他绝对单位一样，px单位不会根据浏览器窗口的宽度缩放。因此，如果你的整个页面设计使用px而不是%等绝对单位，它将无法适应浏览器的宽度。这本质上并没有好坏，只是设计者需要在坚持确切大小和不灵活与拉伸但同时不坚持确切大小之间做出选择。一个网站通常会混合使用固定大小和灵活大小的对象。
固定大小的元素通常需要合并到页面中-例如广告横幅，徽标或图标。这确保您在设计中几乎总是需要至少一些 px的测量值。例如，图像将（默认情况下）缩放为每个像素的大小为1px，因此如果您正在围绕图像进行设计，则需要px单位。它对于精确的字体大小和边框宽度也非常有用，由于四舍五入，在大多数屏幕上使用px单位最有意义。
所有绝对测量值彼此严格相关；也就是说，1英寸是总是96px，就像1英寸是总是72pt一样。（请注意，在谈论基于屏幕的媒体时，1英寸几乎永远不会实际上是物理的英寸）。所有绝对测量值都假设标称屏幕分辨率为96ppi和桌面显示器的标称观看距离，在这样的屏幕上，一个px将等于屏幕上的一个物理像素，一个总是0将等于96个物理像素。在像素密度或观看距离显着不同的屏幕上，或者如果用户使用浏览器的缩放功能缩放了页面，px将不再必然与物理像素相关。
em不是绝对单位-它是相对于当前选择的字体大小的单位。除非您通过使用绝对单位（例如px或pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体选择的影响，因此将em用作一般长度单位是没有意义的，除非您特别希望它随着字体大小缩放。
当您特别希望某物的大小取决于当前字体大小时，请使用em。
rem类似于em，但它相对于文档的基本字体大小（特别是根元素），而不是给定当前元素的字体大小。
%也是一个相对单位，在这种情况下，相对于父元素的高度或宽度。如果您的设计不依赖于特定的像素大小来设置其大小，它们是px单位的一个很好的替代方案，例如设计的总宽度。
在您的设计中使用%单位允许您的设计适应屏幕/设备的宽度，而使用px等绝对单位则不然。
vh、大众、vmin和vmax是类似于%的相对单元，但它们相对于视口（窗口可视区域的大小）而不是父元素的大小。它们分别相对于视口的高度、宽度、两者中较小的和两者中较大的。

小开

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

小开

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

有关此类设计的几个示例和文章（有无数可供选择），请参阅最新一期的A List：流体网格，旧文章如何在CSS中调整文本大小或Dan Cederholm的防弹网页设计。

您的图像仍然应该以px大小显示，但是，一般来说，使用px大小的文本不被认为是好的形式。

尽管我个人鄙视IE6，但它目前是我们财富200强公司中大部分用户认可的只有浏览器。

小开

您可能希望在IE6消失（从您的网站）之前使用em作为字体大小。当页面缩放（而不是文本缩放）成为标准行为时，Px将正常。

Traingamer已经提供了必要链接。

小开

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

不过有趣的是，我总是用pt来调整字体大小，我假设所有的网站都使用它。你通常不会在其他应用程序中使用px大小（例如Word）。我想这是因为它们用于打印-但在网络浏览器中的大小与Word中的大小相同…

小开

最佳答案

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

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

使用px定义宽度

这是一个示例，假设我们有一个div标记，我们想把它变成一个时尚的日期框，我们可能有超文本标记语言代码，如下所示：

<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

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

小开

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

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 */}

诸如此类。

小开

托马斯拉特的最高投票答案在他对0的回答中是正确的。但是关于像素的大小是非常非常错误的。所以即使它很旧，我也不能让它没有争论。

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

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

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

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

小开

例子：

代码：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

…

身体

1

2

3

4

5

通过改变身体中的值，其余的自动改变为一种乘以基础值…

10×2=2010×1.6=16等

您可以将基值设置为8px…所以8×2=168×1.6=12.8//可以通过浏览器舍入

小开

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

当您希望font-size根据系统的字体大小进行自适应时，您应该使用相对单位，因为系统为作为超文本标记语言元素的根元素提供了font-size值。

在这种情况下，网页在GoogleChrome中打开，超文本标记语言元素的font-size由Chrome设置，尝试更改它以查看字体为rem/em单位的网页的效果。

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

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

小开

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

为什么是em而不是px？