响应式Web设计：使用HTML5和CSS3实践 （7）

look_w

3.4 用em换成px

最初设计师们使用em是因为在老版本的Internet Explorer无法缩放像素单位的文字。但现代浏览器早就支持了，那么用em替代px还有什么优越性呢。有两点理由：

（1）那:wq些使用Internet Explorer的用户也能够缩放文字

（2）这样做使设计师们的工作变得更加简单

em的实际大小是相对于上下文字体大小而言的，如果我们给body标签设置的文字大小是100%，给其他的文字都使用相对单位em，那么这些字体都会受到body上的初始声明的影响。这样做的好处是，如果完成了所有文字排版以后客户提出希望把字体整体调大一些，那么我们只需要修改body的文字大小其他所有文字都会相应变化。

同样，目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 这个公式也适用于将文字的像素单位转换为相对单位。现代浏览器的默认字体大小都是16像素(作者疏漏了还是过时了明明是14好么)，因此一开始给body标签应用如下任何一条规则都是一样的效果：

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

举一个例子，我们为为网站标题设置了如下样式：

    #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,我们可以对字体大小进行改动：

font-size: 3em; /* 48 ÷ 16 = 3*/

如果应用这个规则除了毛病，通常是目标元素的上下文发生了变化，以页面中的标签为例：

<h1>Every year <span>when I watch the Oscars 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 */
    }

可以看到，span的元素大小是相对于其父元素的文字的大小，而它的行高是相对于文字本身的大小。