px

px.png

是一个绝对字体大小
【注意】
任意浏览器的默认字体高都是16px

em

em

em是相对长度单位，是基于基数计算出来的相对字体大小。这个基数是需要乘以当前对象从其父级遗传字体大小。
如当前对象的父级字体大小未被人为设置，则相对于浏览器的默认字体尺寸（16px）

1.5em = 父级字体大小 * 1.5 = ?

rem

rem.png

rem是CSS3新增的一个相对单位，这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但是基于根节点（比如html）的字体大小进行计算的
【优点】
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

1.5rem = 默认字体大小 (比如： 16px) * 1.5 = 24px

这个默认字体大小是依据你网站当前访问时所使用的浏览器或者其他设备来决定的，对于桌面浏览器默认是16px的字体大小。然后你现在要转换当前元素的字体大小为rem的时候你就可以这样做：

28px = 28/16 = 1.75rem

为了更方便的进行计算转换，你可以把默认字体大小设置成62.5%或者是10px，这个时候你要计算当前元素字体大小的时候，你就可以这样:

28px = 28/10 = 2.8rem

rem的浏览器支持

目前大多数浏览器都支持rem单位的字体大小，不过，要想兼容IE7和IE8，你还是需要使用px来做单位。写法如下：

html { font-size: 62.5%; }
p { font-size: 15px; font-size: 1.5rem; } /* =15px */