相对单位px和em的区别？
相对单位px和em有什么区别？

------解决方案--------------------
1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器。

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

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em，10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px， 这样12px=1.2em， 10px=1em， 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

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大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

------解决方案--------------------
在过去很长一段时间里，我都被 CSS 中字体大小的单位所困扰，px、em、pt、%……其他都很好理解，只有那个 em 让我有些糊涂了，我知道，px 是像素单位，而 em 是相对单位，可我觉得用 px 一个单位就可以覆盖网站上所有的字体单位，那还要 em 这些干什么？结果我错了，而且错得那么无知。如果你和我一样混淆使用着 px 和 em，那么你应该改改这个坏习惯了。

如果你不服气，很正常，要一下子改掉这个坏习惯没有说服力的证据很难让人信服。还是先来看一个 DEMO 吧，一定要用 IE 浏览器看哟，因为在 IE 浏览器菜单中的查看-文字大小有“最大、较大、中、较小、最小”五个层次选项可以调节，看到什么变化了吗？是的，用 px 作为单位的那行文字无论怎么调节都是固定不变的，用 em 作为单位的那行文字就可以随着浏览器对字体大小控制而变化。这就是两者的区别！

继续刨根问底一下，那么在写样式的时候，我们怎么控制 em 和 px 呢？换句话说，em 和 px 的比例关系是什么呢？已经有前辈找到了答案，在未经 reset 的浏览器都符合以下比例：16px = 1em，也就是说那么 10px = 0.625em。如此一来，我们可以在 body 中添加 font-size:62.5%; 于是乎，1em = 16px*62.5% = 10px; 1.2em = 12px; 1.4em = 14px。

有的同学要问了，不是16px = 1em 吗？怎么一会儿又变成 10px = 1em 了？没错，这就是 em 的魅力所在，也就是之前所提到的 em 是相对单位的优势。这样转换是为了我们可以更方便地使用 em 这个单位，因为这就是一个十倍的关系。

是不是对 px 和 em 有了一个全新的认识呢？现在再回过头来看看这个 DEMO，我想你会有兴趣看看此页的源代码，你也可以自己试着写一个比较体会一下 px 和 em。希望没有把你弄晕。