24/12 = 2
接着,这里有个小窍门,像这样应用规则:
#main_content LI {font-size:0.8333em}
这条样式规则表示所有的 #main_content 下的列表项目将显示成 10px。我们是通过同样直接的数学公式得出这个值的:
10 / 12 = 0.8333
但是如果列表嵌套又会怎么样呢?列表会越来越小。为什么?因为我们的规则明确的指出在 #main_content div 元素中的任何的列表项目都是它的父元素的 0.8333 倍。所以我们需要另外一条规则来防止这种“继承的缩小”
LI LI {font-size:1em}
(译者:这里,最好是 #main_content LI LI {font-size:1em},以限定这条规则只能作用在 #main_content 下)
这就是说任何在其他列表项目内的列表项目应该保持同其父列表项目相同的尺寸。在开发期间,我通常采用一个完整的子选择器的集合来防止混乱的发生。
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}就是这样。当通过 ems 控制文本大小的时候有一条原则要记住:文本的尺寸要和其父亲关联,并且使用简单的计算来做到这一点:
子元素像素值 / 父元素像素值 = 子元素 ems
一些有用的工具
Pixy 的 list computed styles 是个神话般显示文本尺寸层级(或者其他的CSS属性)的书签。Mozilla’s Inspector Inspector (Mozilla Dom 查看器)是一更强大的工具,他允许你查看附加在任何元素的 CSS 规则以及叠层优先级,因此你能知道为什么你的文本没有照着你的预想改变尺寸。
(译者:这里,我强烈推荐 Firebug, IE8 内置的 Dom 查看器也还不错)
最后,什么是 ems
典型的说,一个 em (发音为 emm) 是个垂直间距的印刷单位,是个浮动的(相对的)度量。一个 em 是一个文本尺寸的距离。 在10像素的字体里,一个 em 就是10像素。在18像素的字体里,它就是 18像素。因此, 在任何文本尺寸下,1em 的边距都会是成比例的(译者:都会是一个字)。










