em、rem、px在Web开发中的区别

随着响应式设计的不断火热，基于相对字体大小的单位变开始流行起来，但他们真正的区别在哪里，有的时候会搞得晕头转向，在这里我来做个总结。如果有说的不当的地方，还请各位同仁多多指教。

在说之前有两个很重要的概念，那就是font-size具有继承性以及body，html是根元素。

1. px 这个单位的特点就是精准性。但是他的缺点就在于太过于精确从而导致用户在拖动、改变浏览器的字号大小以及尺寸时，就会出错。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
2. em 这个单位是相对于父级作为参考点而进行设置的，主要作用是为了适应不同屏幕下的字号大小。如果当前元素的父级并没有设置字号大小，那么此元素的基准点会被转移到根元素上。比如，在body以及html上设置了font-size=“14px”，那么根目录下的所有字号大小都是根据这个14px来进行转换的。如果遇到需要进行单独设置的情况时，只需要在当前元素的父级上设置一个新的font-size即可。在此我给大家推荐一篇文章How to size text using ems

        body {
                font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
            }
            h1 {
                font-size: 2.4em; /*2.4em × 10 = 24px */
            }
            p   {
                font-size: 1.4em; /*1.4em × 10 = 14px */
            }
            li {
                font-size: 1.4em; /*1.4 × ? = 14px ? */
            }

rem Css3的官网是这样定义rem的 “font size of the root element” rem依旧只是相对大小，但只是相对于html根目录的字号大小，也就是说，我只需要改变根目录的字号大小就可以改变全局的字号大小。而em虽说可以根据父级元素以及根元素的大小而进行改变，但却具有一定的不确定性。推荐给大家一个单位转换的网站以供参考。

在这里建议将根目录字号大小设置为62.5%

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
      body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
      h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

但是rem存在一定的兼容性，比如IE6-8就不支持，解决的办法就是px和rem一起设置。