自适应rem布局
2016-03-02 10:44
246 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <style type="text/css"> section { width: 100%; height: 100%; background: red; } .page{ width: 5rem; height: 10rem; background: yellow; font-size: 0.3rem; } </style> </head> <body> <section> <div class="page">rem跟着html:font-size变化</div> </section> </body> <script type="text/javascript"> var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发。绑定此事件时, //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。 //总来的来就是监听当然窗口的变化,一旦有变化就需要重新设置根字体的值 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //设置根字体大小 docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </html>
来自:http://www.imooc.com/code/10547
js动态计算rem
!(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 20 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));
来自:https://segmentfault.com/a/1190000003690140
相关文章推荐
- 正则表达式3-兄弟的回复
- linux下彻底卸载mysql 图解教程
- Redis+Sentinel安装与配置
- 如何让ClickOnce进行手动更新(含代码)
- LVS三种负载均衡方式比较
- 解决Sublime Text 3中文显示乱码(tab中文方块)问题
- Python入门教程 超详细1小时学会Python
- 排序算法之快速排序
- 【理解】 iOS沙盒(sandbox)机制(二)
- 正则表达式2-邮箱的故事
- 获取文本的值
- 初学者级java.lang.RuntimeException: Unable to instantiate activity ComponentInfo
- maven工程引入的时候提示Missing artifact ...并且项目上有一个感叹号
- 移动页面【点击穿透】问题
- iOS 控制台unicode转中文
- httpd-2.4.18+php-5.6.18+nagios-4.1.1+ nagiosgraph-1.5.2 installation on rehl6.4
- 使用chkconfig批量关闭服务
- Linux内核编码风格要求,该文档位于Linux内核下的Documentation/CodingStyle
- Mysql数据库DML操作delete不支持表的别名操作
- c++中cout、cerr、clog的区别