px和em都是长度单位，区别是，px的值是固定的，em的值是相对的，并且em会继承父级元素的字体大小。
任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
为了简化计算，在css中的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
引自：http://www.w3.org/Style/Examples/007/units
But in general you would use a different set of units for display on screen than for printing on paper. The following table gives the recommended use:
| Recommended | Occasional use | Not recommended | |
|---|---|---|---|
| Screen | em, px, % | ex | pt, cm, mm, in, pc |
| em, cm, mm, in, pt, pc, % | px, ex |
The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc
从上面可以看出，不管屏幕输出或是打印，都推荐的em在其中，px反而在打印中不推荐。
使用em相对大小的另一个好处是，使js改动整个网页字体大小非常方便，只需要改变根结点body的font-size，整个网页的文字大小都变了。
<script type="text/javascript">
var defaultSize=62.5;
$(function(){
$("#btnChangeFontSize").click(function(){
defaultSize+=10;
$("body").css("font-size",defaultSize+"%");
});
});
</script>
调试时发现最新版的chrome中，当字体大小小于12px时，它默认就换成12px了，解决办法是添加css: body {-webkit-text-size-adjust: none; }
tests/index.html