使用rem来做响应式布局（js动态加载）

 <script>
 ;(function (doc,win) {
     var htmlEle=doc.documentElement;
     var reload="orientationchange" in window ? "orientationchange":"resize";
     function setFontsize () {
         //每次通过屏幕转动或者重新设置宽高的时候获取屏幕宽度
         var clientWidth=htmlEle.clientWidth;
         console.log(clientWidth);
         if(!clientWidth) return;
         //设置html标签的fontsize大小
         htmlEle.style.fontSize=20*(clientWidth/320)+"px";
             };
         win.addEventListener(reload,setFontsize, false);
         doc.addEventListener("DOMContentLoaded",setFontsize,false);
     })(document,window);
 </script>

当设计稿为640px时候，在320px的屏幕下页面的显示效果就为1rem=20px；通过动态改变页面，页面的每个元素都能通过根节点的fontsize来计算元素的大小。