再谈网页设计中的em与px

回应hax大牛在“em or px“的讨论:

上次看到你在我分享的friendfeed上面的评论我就想好好讨论一下这个问题了。’em’是从字体设计上面继承的一个概念,是指字模的高度,一般书上会说em能够保证不同字体的大写X的高度保持一致。那么大写X的高度就是这个字体的em。

你说的px是相对单位不仅在你说的显示器尺寸上是相对的,而且由于大部分的矢量元素的渲染来说比较先进的浏览器都支持“半像素平滑”,连像素内的颜色的投影也可以是相对的(渲染引擎会进行像素平滑的计算)。

在网页渲染的布局上来说它要转化em到px这个单位,就是说在一定的zoom下两者是等价的。

但是为什么我还是很支持使用em作为首选的字体和布局单位呢?当然这不是用来保证一行到底可以显示多少文字,因为px也可以保证。主要目的是区分布局中“缩放友好”的矢量元素(如字体,布局相关的所有html元素)和“缩放不友好”的标量元素(如很多“替换元素”是不友好的,典型的如图片,还有在使用某些Windows主题以后的input元素)。在使用webkit的浏览器,缩放会更加友好,文字和布局会随缩放变化,但是图片等却保持原有的最佳尺寸。Firefox3以后所使用的全部缩放我觉得在有些时候是有用的,可是总有它让你不爽的地方⋯⋯

比如如果你在某些设计场合希望容器变大文字尺寸不变,从而在缩放显示更多内容。另外一些地方你希望容器和文字尺寸一起变化。px和em的配合让两种需求可以比较容易的在同一个页面出现。

从设计为内容服务的角度考虑,使用em作为基本单位可以让你更集中于“内容驱动”,避免过分的”设计驱动“。我的工作范畴内前者更常见,也更符合客户的需求。