为什么他们而不是px？
我听说你应该用em来定义样式表中的大小和距离，而不是以像素为单位。 所以问题是为什么在css中定义样式时我应该使用em而不是px？ 有没有一个很好的例子来说明这一点？
说一个比另一个更好的选择是错误的（或者两者在规范中都没有被赋予它们自己的目的）。 甚至值得注意的是，StackOverflow广泛使用了px单位。 Spoike被告知这是可怜的选择。
单位的定义
px是一个绝对的度量单位（如in，pt或cm），它也恰好是单位的1/96（稍后为什么）。 由于它是一种绝对测量，因此可以在任何时候将其定义为特定大小，而不是与浏览器窗口的大小或字体大小等其他内容成比例。
像所有其他绝对单位一样，px单位不会根据浏览器窗口的宽度进行缩放。 因此，如果整个页面设计使用像px这样的绝对单位而不是％，它将不适应浏览器的宽度。 这不是天生的好或坏，只是设计师需要在坚持精确尺寸和不灵活与伸展之间做出的选择，而不是坚持精确的尺寸。 对于一个站点来说，通常会有固定大小和灵活大小的对象的混合。
通常需要将固定大小的元素合并到页面中 - 例如广告横幅，徽标或图标。 这可以确保您在设计中几乎总是需要至少一些基于px的测量。 例如，图像会（默认情况下）被缩放，使得每个像素的大小为1 * px *，因此如果围绕图像进行设计，则需要px个单位。 这对于精确的字体大小以及对于边框宽度来说也非常有用，由于四舍五入，对于大多数屏幕使用px单位是最有意义的。
所有的绝对测量值都是严格相关的; 也就是说，1in总是96px，就像1in总是72pt一样。 （请注意，在谈论基于屏幕的媒体时，1英寸几乎从来都不是实际的英寸）。 所有绝对测量都假定标称屏幕分辨率为96ppi，桌面显示器的标称观看距离为1，在此屏幕上，一个像素等于屏幕上的一个物理像素，一个像素等于96个物理像素。 在像素密度或观看距离显着不同的屏幕上，或者用户使用浏览器的缩放功能缩放页面时，px不再需要与物理像素相关。
em不是一个绝对单位 - 它是一个相对于当前所选字体大小的单位。 除非通过用绝对单位（如px或pt）设置字体大小来覆盖字体样式，否则这将受到用户浏览器或操作系统中字体的选择（如果它们已经制作一个字体）的影响，所以它没有任何意义使用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>
一个简单的实现将定义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倍。