英文原文地址：http://clagnut.com/blog/348/
译者注：原文写于2004年，但里面提到的IE不支持文本缩放的问题直到IE9还是存在。
屏幕文本的尺寸在CSS中是用pixel、em或者关键词来设置的。众所周知，用pixel来设置尺寸很简单：给选择器添加font-size属性值即可。用关键词来设置尺寸稍显复杂，需要采用几个变通的方法，但幸运的是有篇文章对其进行详细的讲解。现在来说说em这个单位。目前大家对它是唯恐避之不及：“em这个单位使用时效果前后不统一，晦涩难用。”很多人可能都会这么认为。但如果你仅仅是因为害怕改变而怀有这种想法，接下来你会发现em也不是那么难掌握的。下文将讲述如何像使用pixel般轻松高效地使用em。
为什么要使用em这个单位？
如果条件允许，使用pixel也不错。但现实不允许我们这么做，我们还有个垃圾浏览器要应付──Windows的IE浏览不允许用户对用pixel定义的文本进行缩放。不管你怎么想，用户有时确实需要对文本进行缩放：或许他们是近视眼，或者是在做展示，或者他们的屏幕分辨率过高，甚至可能只是因为他们眼睛酸痛。除非你能确保用户不会使用IE浏览器或者不会缩放文本，否则使用pixel作为尺寸单位就不是一个可行的方案。
用关键词作为尺寸单位能让浏览器缩放文本，但它无法提供pixel一般精确的控制。使用em则不但能让浏览器缩放文本，也会提供pixel般精确的尺寸控制，所以它向来是我的首选。
开始学习使用em
让我们开始学习使用em。我会从零开始，教你怎么用em设置文本尺寸。我会假设你浏览的字号被设置为“中”，现代浏览器的“中”字号的默认值都是16px。第一步是将body标签的字体尺寸值设置为62.5%，这样子整个文档的字体尺寸也会相应减少。
译者注：10 / 16 * 100 = 62.5%。对body标签施加这个尺寸样式时，由于浏览器默认尺寸是16px， 16 * 62.5% 等于10px，也就是将body的font-size尺寸修改为10px。
BODY {font-size:62.5%}使用em需要一个参考点，一般都是以body标签的“font-size”为基准。如此就将基准尺寸从16px变成了10px，便于计算。这样子我们就以em为尺寸单位，却能用pixel的方式来计算了：1em等于10px，0.8em等于8px，1.6em等于16px，以此类推。如果你是用css来对页面进行布局的，那么现在你或许已用几个div标签将其他元素包裹了起来。设置一下这个几个div的文本尺寸就差不多完事了。假设页面是带头尾部的两栏布局：
<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>
#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}现在页面的导航（navigation）和侧边栏（side_bar）的文本大小是10px，内容区（main_content）是12px，尾部是9px。不过有些特殊情况需要处理一下（就算你是用的pixel，也必须进行同样的处理）。上文main_content标签中所有的heading标签（从H1到H6）里的文本在基于Mozilla的浏览器上都会被展示为12px，而其他浏览器则会正常显示。给所有heading标签文本显式地设置大小则可以保证跨浏览器一致性。例如：
H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */对表单和表格也需要进行类似处理以确保表单控件和表格单元格继承正确的尺寸（主要是为解决IE的问题）：
INPUT, SELECT, TH, TD {font-size:1em}接下来要进行最后一步调整，这一步是最麻烦的：处理嵌套元素。在之前制作页面头部的教程里我们学习过，现在我们来更加深入的了解一下。先把body标签的文本尺寸更改为10px，即是它默认尺寸的 75% ：
16 x 0.625 = 10
然后内容区（main_content）文本尺寸应该为12px，然后不做更改的话，内容区文本尺寸会被展示为10px，因为它继承了其父元素body标签的属性。这意味着使用em时是基于父元素的文本尺寸来调整文本大小的：
child pixels / parent pixels = child ems（子元素pixel值 / 父元素pixel值 = 子元素em值）
12 / 10 = 1.2
接着将H1标题设置为24px大小。H1标签的父元素是名为main_content的div标签，其文本尺寸为12px。要将标题的文本尺寸变成24px就必须将其变成双倍，所以em尺寸为：
24 / 12 = 2
照着这种方式继续往下，当开始应用类似这样的样式规则时就开始变得有点难度了：
#main_content LI {font-size:0.8333em}上述规则表明内容区（main_content）里的列表项的文本尺寸为10px，计算公式为：
10 / 12 = 0.8333
但如果这个列表里面包含了另外一个列表时会如何？另外一个列表的文本尺寸变得更小了。为何如此？因为上述规则的意思是“任何在内容区（main_content）里的列表项的文本尺寸是其父标签文本尺寸的0.8333倍”。所以我们需要多添加一条规则，防止它继承了父标签的属性后文本尺寸相应缩小：
LI LI {font-size:1em}这条规则表明嵌套在一个列表里的列表，其文本尺寸与其父元素相同（另外一个列表）。在开发中我经常将多个子选择器组合在一条声明中：
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}在使用em进行尺寸设置时，记住这条规则：文本尺寸是基于其父元素进行设置的。用这条公式进行计算：
child pixels / parent pixels = child ems（子元素pixel值 / 父元素pixel值 = 子元素em值）
一些有用的工具
Pixy的list computed styles是查看文本尺寸（或其他任何css属性）层叠规则的神器。Mozilla的DOM检查器则更为强大，它可以查看当前元素受到哪些CSS规则的影响及其层叠优先级，这样子你就可以看到文本尺寸样式规则是如何作用的了。
最后来给EM下一个定义
最常用的定义是：em是文字排版单元（也就是文字）占据的水平空间距离，是一种相对的测量尺寸单位。1em的距离等同于该文本尺寸的大小。也就是说对于10px的字体来说，1em等于10px；而18px的1em就等于18px。因此任何文本1em内边距的大小都是其文本尺寸的1倍。
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
