用em替换px

过去的几年里，网页设计师使用em替代px主要是为了文字缩放。因为老板本的Internet Explorer无法缩放像素单位的文字。不过现在浏览器很久以前就支持缩放以像素为单位的文字了。那用em替换px还有什么必要性或优越性呢？有亮点显而易见的理由：
一是那些使用IE6的用户也将能够缩放文字;
二是这样做可以使我们设计师和开发者的生活更简单。

em的实际大小是相对于其上下文的字体大小而言的。如果我们给标签设置文字大小为100%，给其他文字都使用相对单位em，那这些文字都会受 body上的初始声明的影响。这样做的好处是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点，我们就可以只修改body的文字大小， 其他所有文字也会相应变大。

同样，“目标元素尺寸÷上下文元素尺寸=百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。值得注意的是，现代浏览器默认文字大小都是16像素（显示声明的除外）。因此一开始给body标签应用下列任何一条规则所产生的效果都一样：

font-size:100%;
font-size:16px;
font-size:1em;

下面举例。第一段以像素为单位的文字就是页面左上角的
网站标题： AND THE WINNER ISN‘T…….

#logo{
 display: block;
 padding-top: 75px;
 color: #0d0c0c;
 text-transform: uppercase;
 font-family: Arial, "Lucida Grande", Verdana, sans-serif
 font-size:48px;
 }

#logo span{ color: dfdada;}

因为48÷16=3，所以我们将样式修改如下：

#logo{
 display: block;
 padding-top: 75px;
 color: #0d0c0c;
 text-transform: uppercase;
 font-family: Arial, "Lucida Grande", Verdana, sans-serif
 font-size: 3em; /*48÷16=3*/
 }

这个逻辑在整个网站中通用。如果发现出了毛病， 那应该是目标元素的上下文发生了变化。以页面中的标签为例：

<h1>Every year <span>when I watch the Oscares I'm annoyed...</span></h1>

修改后的相对单位样式如下：

#content h1{
 font-family: Arial, Helvetica, Verdana, sans-serif;
 text-transform: uppercase;
 font-size: 4.3125em; /*69÷16*/
}

#content h1 span{
 display: block;
 line-height: 1.052631579em; /*40÷38*/
 color: #757474;
 font-size: .550724638em /*38÷69*/
}

可以看到元素的文字大小(38像素)是相对于其父元素的文字大小（69像素）而言的。而它的行高（40像素）则是相对于其本身的文字大小（38像素）而言。

现在，我们的页面结构可以自动缩放，文字大小也已从像素单位转换成相对单位。但是，我们还必须解决图片大小随视口缩放的问题。

见下次更新