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

说一个是比另一个更好的选择是错误的（或者在规范中都没有给出他们自己的目的）。甚至值得注意的是，StackOverflow大量使用了px单位。斯派克被告知这不是一个糟糕的选择。

单位定义

• px是一个绝对的度量单位（例如in，pt或cm），它也恰好是in in单位的1/96 （更多有关后面的原因）。由于这是绝对度量，因此您可以随时使用它来定义特定大小，而不必与浏览器窗口大小或字体大小等其他比例成比例。

  像所有其他绝对单位一样，px单位不会根据浏览器窗口的宽度缩放。因此，如果您的整个页面设计都使用诸如px而不是％的绝对单位，则它将不适应浏览器的宽度。这并不是天生的好坏，只是设计人员需要在粘附到精确的尺寸和不屈不挠与拉伸之间做出选择，但在此过程中没有粘附到确切的尺寸。一个站点通常会同时包含固定大小和灵活大小的对象。

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

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

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

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

• 在这种情况下，％还是相对于父元素的高度或宽度的相对单位。如果您的设计不依赖特定的像素大小来设置其大小，则它们可以很好地替代px单位，例如设计的总宽度。

  在设计中使用％单位可使您的设计适应屏幕/设备的宽度，而使用px等绝对单位则不能。

我有一台高分辨率的小型笔记本电脑，并且必须以120％的文本缩放比例运行Firefox才能阅读而不会斜视。

许多站点对此都有问题。布局变成乱码，按钮中的文本被切成两半或全部消失。即使stackoverflow.com也遭受了它的困扰：

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

我问这个问题的原因是我忘记了如何使用em，因为我很高兴在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-boxpx 为单位定义类的宽度：

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

这样，您就可以在日期框上进行流畅的设计，即框将与文本一起按日期框定义的字体大小按比例放大。在此示例中，font-size的定义*为10pt，它将是该字体大小的2.5倍。因此，当您在浏览器中调整字体大小时，该框的大小将是该字体大小的2.5倍。

顶部投票答案在这里从thomasrutter是正确的，他对响应EM。但是像素大小是非常非常错误的。因此，即使它很旧，我也不能忘记它。

电脑屏幕通常不是96dpi！（或者ppi，如果您想做书呆子。）

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


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

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

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

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

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

这导致两件事（相关）：

1. 如果以后选择在CSS中编辑字体大小，则保持比例很容易。
2. 许多浏览器都支持自定义字体大小，从而覆盖了CSS。如果以像素为单位设计所有内容，则在这些情况下布局可能会中断。但是，如果您使用ems，则这些替代方法可以缓解这些问题。

例：

代码：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 = 20 10×1.6 = 16等

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

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

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

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

有关此类设计的几个示例和文章（有很多选择），请参阅最新一期的“ A List Apart：Fluid Grids”，旧文章《如何在CSS中调整文本大小》或Dan Cederholm的Bulletproof Web Design。

您的图片仍应以px大小显示，但是通常来说，以px来缩放文本大小不是一种好方法。

尽管我个人很鄙视IE6，但它是我们财富200强公司中唯一批准用于大多数用户的浏览器。

有一个简单的解决方案，如果您想使用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 */
}

等等。

您可能想使用em作为字体大小，直到IE6消失（来自您的站点）。当页面缩放（与文本缩放相反）成为标准行为时，Px会很好。

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

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

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

在这种情况下，如果网页在Google chrome中打开，则HTML元素的字体大小由chrome设置，请尝试对其进行更改，以查看对带有rem / em单位字体的网页的影响。

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

因此，px当您想要固定大小时使用，当rem/ em想要大小自适应于系统大小时，则使用/ 。

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

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

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