我听说你应该在样式表中用em而不是像素来定义大小和距离。所以问题是,在CSS中定义样式时,为什么要使用em而不是px?有没有一个很好的例子可以说明这一点?
当前回答
一个非常实际的原因是,如果使用px指定字体,IE6不允许您调整字体大小,而如果使用em或百分比等相对单位,则可以调整字体大小。不允许用户调整字体大小对可访问性非常不利。尽管它在下降,但仍有很多IE 6用户。
其他回答
在IE6(从您的网站上)消失之前,您可能希望使用em作为字体大小。当页面缩放(与文本缩放相反)成为标准行为时,Px将正常。
Trainfamer已经提供了必要的链接。
使用em或百分比的主要原因是允许用户在不破坏设计的情况下更改文本大小。如果您使用以px指定的字体进行设计,则如果用户选择文本大小更大,字体大小不会改变(在IE 6和其他浏览器中)。这对于有视觉障碍的用户来说非常糟糕。
有关此类设计的几个例子和文章(有无数可供选择),请参阅最新一期的“a List Apart:Fluid Grids”,旧一期的文章“How to Size Text in CSS”或Dan Cederholm的防弹Web Design。
您的图像仍然应该以像素大小显示,但通常情况下,用像素大小显示文本被认为是不好的形式。
尽管我个人很鄙视IE6,但它目前是《财富》200强公司中唯一一款被大多数用户认可的浏览器。
避免使用em或px,而是使用rem,因为它更容易找到计算值。但在em和px之间,px更好,因为em很难调试。
例子:
代码: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//可由浏览器舍入
因为他们(http://en.wikipedia.org/wiki/Em_(排版))与当前使用的字体大小成正比。如果字体大小是16点,那么一个em就是16点。如果字体大小为16像素(注意:与点不同),则一个em为16像素。
这导致了两件(相关的)事情:
如果你以后选择在CSS中编辑字体大小,保持比例很容易。许多浏览器支持自定义字体大小,覆盖CSS。如果您以像素为单位设计所有内容,那么在这些情况下,您的布局可能会中断。但是,如果你使用ems,这些过度使用应该可以缓解这些问题。