px
像素，相对长度单位。像素px 是相对于显示器屏幕分辨率而言的。
特点：
1.IE 无法调整使用px作为单位的字体大小；
2.国外大部分网站能够调整的原因在于其使用了em 或者rem 作为字体单位；
3.Firefox 能够调整px 和 em， rem ，但是96%以上的中国网民使用的是IE 浏览器（或者内核）。
pt
是一个物理长度单位，指的是72分之一英寸。9pt = 12px 可以一次换算。
em
相对长度单位，相对于当前元素内文本的字体尺寸。任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合：1em=16px
特点：
1.em 的值不是固定的；
2.em 会继承父级元素的字体大小。
<div style="font-size:20px;">
<p style="font-size:1em;">这里1em=20px</p>
<p style="font-size:2em;">这里2em=40px</p>
</div>
上面的例子就说明了em 的值并非是固定的，他是根据父元素的字体大小来决定的。如果父元素设置了font-size:20px，那么1em = 20px ， 2em = 40px；如果父元素设置了font-size: 30px, 那么1em = 30px， 2em = 60px。依次类推。
rem
是css3新增的一个相对单位，可以理解为root em， 相对于根节点html 的字体大小来计算的。chrome/firefox/ie9+ 支持。任意浏览器的默认字体高度都是16px，所以未经调整的浏览器都符合：1rem = 16px。
<html style="font-size:100px;">
<head>
<title></title>
</head>
<body>
<p style="font-size:1rem;">这里1rem=100px</p>
<div style="font-size:50px;">
<p style="font-size:2rem;">这里2rem=200px</p>
</div>
</body>
</html>
上面的例子说明了，rem 的值只收到根节点html 的字体大小影响，并不受父元素字体大小的影响。如果根节点html 设置了font-size:200px，那么1rem = 200px。 2rem = 400px。依次类推。
rem 和em 在为元素设置字体大小时，都是相对大小。区别在于：使用rem 时，相对的只是html 跟元素。
rem 这个单位可谓集相对大小和绝对大小的优点于一身。通过它既能可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
注意：
谷歌浏览器chrome强制最小字体为12px，因此即使设置了小于12px的值，也会显示成12px。因此，当你给html设置font-size:10px时，1rem并不是等于10px，而是等于12px
具体使用哪种字体单位，还是要根据项目实际情况来定的。rem 更加适合不用考虑低版本浏览器兼容问题的项目来使用。
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
