rem的實現原理

em和rem在邏輯上的差別僅僅是參照對象不同，em是參照父元素的字體大小，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}