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


当前回答

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

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

其他回答

例子:

代码: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{字体大小:2em;}//20px

body

1

2

3

4

5

通过改变身体中的值,其余部分会自动改变为基础值的一倍…

10×2=2010×1.6=16等

你可以将基值设为8px…所以8×2=168×1.6=12.8//可由浏览器舍入

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

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

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

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

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

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

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

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