为什么em而不是px？

Question

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

Answer 1

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

单位的定义

• px 是一个绝对的度量单位（如 in ， pt 或 cm ）这也恰好是 in 单位的1/96（更多关于为什么以后）。因为它是绝对测量，所以可以在任何时候使用它来定义特定大小的东西，而不是与浏览器窗口的大小或字体大小等其他东西成比例。

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

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

我问这个问题的原因是我忘记了如何使用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>

一个简单的实现将在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 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倍。

Answer 4

来自thomasrutter的最高投票回答是关于 em 的回答。但是像素的大小是非常错误的。所以即使它已经老了，我也不能让它变得不充分。

电脑屏幕通常不是96dpi！ （或者说ppi，如果你想变得迂腐。）

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


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

谁发明了96dpi计算机屏幕神话？ （有些宗教以72dpi神话运作。但同样错误。）

Answer 5

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

对于通过缩放字体大小实现缩放的浏览器尤其有用。因此，如果您使用em调整所有元素的大小，则会相应缩放。

Answer 6

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

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

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

Answer 7

示例：

代码： 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 //可以通过浏览器进行舍入

Answer 8

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

Answer 9

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

Answer 10

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

有关此类设计的几个例子和文章（有无数可供选择），请参阅最新一期的A List Apart：Fluid Grids，旧文章How to Size Text in CSS或Dan Cederholm's { {3}}。

您的图片仍应以px尺寸显示，但一般情况下，使用px调整文字大小并不适合。

就我个人鄙视IE6而言，它目前只是我们财富200强企业中大部分用户批准的唯一浏览器。

Answer 11

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

等等。

Answer 12

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

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

在这种情况下，如果网页在Google chrome中打开，则HTML元素的 font-size 是由chrome设置的，请尝试对其进行更改，以查看带有rem /字体的网页上的效果英制单位。

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

>

因此，如果要固定大小，请使用px，而要使大小自适应于系统大小时，请使用rem / em。

Answer 13

您可能希望将em用于字体大小，直到IE6消失（来自您的网站）。当页面缩放（与文本缩放相反）成为标准行为时，Px将会正常。

Traingamer已提供neccessary links。

Answer 14

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

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

Answer 15

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