rem和em的区别。以及如何使用。

两者区别

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

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

              使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

 

rem单位的使用       

（直接引入下面的js代码就可实现自适应字体）

   如果我们需要的是实现字体自适应，不需要手动刷新，就需要js去封装  rem 单位。

       var fun=function(doc,win){
          var docEl=doc.documentElement,
              resizeEvt='orientationchange'    in window ? 'orientationchange' : 'resize',
              recalc=function(){
                  var clientWidth =docEl.clientWidth;  //clientWidth窗口大小
                  if(!clientWidth) return;
                  if((12 * (clientWidth / 640)) <= 20) { 

                           //此处  640 为屏幕宽度，

                          //  12 * (clientWidth / 640) ;  表示 12px =1rem
                             docEl.style.fontSize = 12 * (clientWidth / 640) + 'px';
                      }else{
                            docEl.style.fontSize = 10 +'px';
                      }
              } 
            if(!doc.addEventListener) return;
            win.addEventListener(resizeEvt,recalc,false);
            doc.addEventListener('DOMContentLoaded',recalc,false);  
        }
        fun(document,window);