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

標籤：setfont   擷取   doc   resize   dom   code   響應式   ati   rip   

 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動態載入）