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：如果发现哪出了毛病，那应该是目标元素的上下文发生了变化。