1 <script>
 2 ;(function (doc,win) {
 3     var htmlEle=doc.documentElement;
 4     var reload="orientationchange" in window ? "orientationchange":"resize";
 5     function setFontsize () {
 6         //每次通過屏幕轉動或者重新設置寬高的時候獲取屏幕寬度
 7         var clientWidth=htmlEle.clientWidth;
 8         console.log(clientWidth);
 
 9         if(!clientWidth) return;
10         //設置html標簽的fontsize大小
11         htmlEle.style.fontSize=20*(clientWidth/320)+"px";
12             };
13         win.addEventListener(reload,setFontsize, false);
14         doc.addEventListener("DOMContentLoaded",setFontsize,false);
15     })(document,window);
 
16 </script>

當設計稿為640px時候，在320px的屏幕下頁面的顯示效果就為1rem=20px；通過動態改變頁面，頁面的每個元素都能通過根節點的fontsize來計算元素的大小。

使用rem來做響應式布局（js動態加載）