随笔- 137 文章- 0 评论- 34 阅读- 97万

详解用em替换px

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

　　在这里，我们可以使用这个公式，来将文字的像素单位转换为相对单位。

　　“目标元素的尺寸÷上下文元素的尺寸=百分比尺寸”

　　值得注意的是，现代浏览器的默认文字大小都是 16 像素（显式声明的除外）。因此一开始给 body 标签应用下列任何一条规则所产生的效果都一样：　　

　　　　　　　　 font-size: 100%;

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

　　下面就以一段代码为例：　

　　#logo {

　　　　font-size: 48px;
　　}

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

　　#logo {
　　　　font-size: 3em; /* 48 ÷ 16 = 3*/
　　}

　　如果发现哪出了毛病，那应该是目标元素的上下文发生了变化。以页面中的标签为例：
　　　　<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
　　修改后的相对单位样式如下：
　　#content h1 {
　　　　font-size: 4.3125em; /* 69 ÷ 16 */

　　}

　　#content h1 span {
　　　　line-height: 1.052631579em; /* 40 ÷ 38 */
　　　　font-size: .550724638em; /* 38 ÷ 69 */
　　}
　　可以看到<span>元素的文字大小（38 像素）是相对于其父元素的文字大小（69 像素）而言的。而它的行高（40 像素）则是相对于其本身的文字大小（38 像素）而言。

　　ps：如果发现哪出了毛病，那应该是目标元素的上下文发生了变化。