使用px定义字体的话无法用浏览器字体放大功能，还有在做响应式网页时，字体响应大小也非常不方便。

px：像素（plxels），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em：相对长度单位。相对于当前对象内文本的字体尺寸（em是基于排版转换的一种量度，在css中em的大小参考字符框的高度）。

默认1em=16px，那为什么等于16px？因为浏览器默认的字体大小都是16px，所以没有重新设置浏览器默认字体大小的话1em就等于16px。在页面里要用到em作为单位的话，默认的1em=16px会使得在计算他们转换的值时非常不方便，比如我要把一个块里面的内容字体大小设置成18px，但我只想用em做为单位，那么情况就会这样，1em=16px，1px=0.0625em，得18px=1.125em（0.0625em*18）。擦，多麻烦！所以为了简化px和em之间的换算，需要在body里定义font-size:62.5%，即将浏览器初始化为即1em=10px，这样的话，上面的font-size:18px就等于font-size:1.8em。

上面说过在em的大小参考字符框的高度，所以在css其他属性中，包括width,height,margin,padding,text-indent等使用em作为单位的话，大小计算也跟计算font-size一样的道理。

计算公式：1/父元素font-size值*需要转换的px=em值       (PS:父元素font-size的单位没有关系，无论px还是em)

不过如果当一个元素本身设置了字体大小，其自身的width，height，margin，padding等属性是以自己的font-size值去计算em的值，在这个元素下的子元素也同理。

所以当元素自身有设置font-size时，除font-size外其他属性的计算公式应该是这样：

1/元素自身的font-size值*需要转换的px=em值

在响应式中的应用

在响应式网页中，字体在不同尺寸的设备下要有不同的大小，以达到最佳的阅读效果，比如一个响应式页面在手机和平板里的字体大小是不一样的，所以用em作为字体大小单位的话，在响应式布局中改变字体大小非常方便。

运行以上代码，改变窗口大小，可看到当窗口大小大于或小于指定尺寸时字体会随着变化，在所有字体都用em作为单位的情况下，只需要改变body{font-size:xx%}即可，当然这只是随便举个简单的例子，看具体情况去设置。

em有如下特点：

1、em的值并不是固定的；

2、em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

1、body选择器中声明Font-size=62.5%；

2、将你的原来的px数值除以10，然后换上em作为单位；

3、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

原文链接1

原文链接2