为什么他们而不是px？

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

Answer 1

说一个是比另一个更好的选择是错误的（或者两者在规范中都没有被赋予自己的目的）。 甚至值得注意的是，StackOverflow广泛使用了px单位。 Spoike被告知这不是可怜的选择。

单位的定义

• px是一个绝对的度量单位（如in ， pt或者cm ），也就是单位的1/96（更多为什么在后面）。 因为它是一种绝对测量，所以可以在任何时候将其定义为特定的大小，而不是与浏览器窗口的大小或字体大小等成比例。

  像所有其他绝对单位一样， px单位不会根据浏览器窗口的宽度进行缩放。 因此，如果您的整个页面设计使用像px这样的绝对单位而不是％ ，那么它将不适应浏览器的宽度。 这不是天生的好或坏，只是设计师需要在坚持一个确切的尺寸和不灵活的伸展之间做出的选择，而不是坚持一个确切的尺寸。 一个站点通常会有固定大小和灵活大小的对象的混合。

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

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

• em不是一个绝对的单位 – 它是一个相对于当前选择的字体大小的单位。 除非用绝对单位（如px或pt ）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体的选择的影响（如果已经制作了一个字体），所以没有任何意义使用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定义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 

这样你就在日期框上有一个流畅的设计，也就是说框将按照日期框中定义的字体大小与文本一起放大。 在这个例子中，字体大小在*定义为10pt，并且将字体大小增加2.5倍。 所以，当你在浏览器中调整字体的大小时，这个字体的大小就是这个字体大小的2.5倍。

Answer 4

thomasrutter在这里回答最高的答案是对他的回应。 但是像素的大小是非常错误的。 所以，即使年纪大了，我也不能放过它。

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

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

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

谁发现了96dpi电脑屏幕的神话？
（一些宗教以72dpi的神话运作，但同样错误）

Answer 5

这对所有需要根据字体大小进行缩放的应用都是有用的。

这对于通过缩放字体大小实现缩放的浏览器特别有用。 所以如果你使用em所有的元素， em会相应地缩放。

Answer 6

因为em（ http://en.wikipedia.org/wiki/Em_ ( typography） ）与当前正在使用的字体大小成正比。 如果字体大小是16点，则一个是16点。 如果您的字体大小是16像素（ 注意 ：不同于点），一个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

五

通过改变身体的价值，其余的自动变化是一种基本的价值… … –

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： 流体网格” ，这是一篇较早的文章“ 如何在CSS中设置文本大小”或Dan Cederholm的防弹网页设计 。

您的图片仍然应该以px大小显示，但是，一般来说，使用px调整文本大小并不是一个好方法。

就像我个人鄙视IE6一样，它是目前唯一被批准用于我们“财富”200强公司的大多数用户的浏览器。

Answer 11

有一个简单的解决方案，如果你想使用px指定字体大小，但仍然希望通过将其放置在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 */ } 

等等。

Answer 12

关于它的价值，下面是CSS中不同单元的定义： http : //www.w3.org/TR/css3-values/#lengths 。

Answer 13

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

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

Answer 14

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

这很有趣，我总是习惯使用pt来设置字体大小，而且我假定所有的网站都使用这个字体。 其他应用程序中通常不使用px大小（例如Word）。 我想这是因为它们是用于打印 – 但是在Web浏览器中的大小与在Word中的大小相同。