标签: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来计算元素的大小。
标签:setfont 获取 doc resize dom code 响应式 ati rip
原文地址:http://www.cnblogs.com/coolblog/p/7323258.html