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


当前回答

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

这导致了两件(相关的)事情:

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

其他回答

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

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

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

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

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

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

电脑屏幕通常不是96dpi!(或者ppi,如果你想迂腐的话。)

像素没有固定的物理大小。(是的,它只固定在一个屏幕上,但在下一个屏幕中,像素很可能更大或更小,当然不是1/96英寸。)证据画一条960像素长的线。用物理尺测量。是10英寸吗?不将你的笔记本电脑连接到电视上。现在线路是10英寸吗?还是没有?在iPhone上显示该行。还是一样大小?为什么不呢?

谁发明了96dpi电脑屏幕神话?(有些宗教使用72dpi的神话。但同样错误。)

我问这个问题的原因是,我忘记了如何使用它们,因为有一段时间我正在愉快地使用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倍。

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

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