rem的实现原理

em和rem在逻辑上的差别仅仅是参照对象不同，em是参照父元素的字体大小（注：在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小），rem是参照根目录HTML的字体大小。

(function(win, doc){
    var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';//orientationchange：移动端存在的监听事件
    function change(){
        var html = doc.documentElement;
        var width = doc.documentElement.clientWidth || win.innerWidth
        html.style.fontSize = width / 72 + 'px';// 除以的数字根据效果图给的基准（一般移动端效果图750px、PC端1440px），得到一个相对容易计算的数值，就可以进行rem的使用了  
    }
    change();
    win.addEventListener(resize, change, false);
    win.addEventListener('load', change, false);
    doc.addEventListener('DOMContentLoaded',change, false);
})(window, document); 

比rem更好的方案　

vw & vh

vw - 视口宽度的1/100；vh - 视口高度的1/100

vw还可以和rem方案结合，这样就不需要使用js计算HTML字体的大小

html {fons-size: 1vw} /* 1vw = width / 100 */
p {width: 15.625rem}