码迷,mamicode.com
首页 > Web开发 > 详细

使用rem来做响应式布局(js动态加载)

时间:2017-08-09 10:10:23      阅读:260      评论:0      收藏:0      [点我收藏+]

标签: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动态加载)

标签:setfont   获取   doc   resize   dom   code   响应式   ati   rip   

原文地址:http://www.cnblogs.com/coolblog/p/7323258.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!