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

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

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

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

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

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

我有一台高分辨率的小型笔记本电脑，必须以120%的文本放大率运行Firefox，才能不斜视地阅读。

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

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

说一个比另一个更好是错误的（或者两个都不会在规范中被赋予自己的目的）。甚至值得注意的是，Stack Overflow大量使用了像素单位。问题表明，这并不是一个糟糕的选择。

单位的定义

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

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

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

有关此类设计的几个例子和文章（有无数可供选择），请参阅最新一期的“a List Apart：Fluid Grids”，旧一期的文章“How to Size Text in CSS”或Dan Cederholm的防弹Web Design。

您的图像仍然应该以像素大小显示，但通常情况下，用像素大小显示文本被认为是不好的形式。

尽管我个人很鄙视IE6，但它目前是《财富》200强公司中唯一一款被大多数用户认可的浏览器。

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

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

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

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

我问这个问题的原因是，我忘记了如何使用它们，因为有一段时间我正在愉快地使用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定义日期框类的宽度：

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

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

等等

托马斯鲁特（thomas rutter）的最高分答案是正确的，但关于像素的大小是非常错误的。所以，即使它很旧，我也不能让它被破坏。

电脑屏幕通常不是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｛字体大小：2em；｝//20px

…

body

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/

当您希望字体大小根据系统的字体大小进行调整时，应使用相对单位，因为系统将字体大小值提供给根元素（即HTML元素）。

在这种情况下，如果网页在Google Chrome中打开，HTML元素的字体大小由Chrome设置，请尝试更改它，以查看使用rem/em单位字体的网页的效果。

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

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

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