js实现rem自动匹配计算font-size的示例
实际开发过程中,我们经常会被各种宽度,高度计算搞晕。尤其是使用了rem的计算方式,自适应布局难倒一大片程序员。为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改html 根元素font-size的值。
下面是相关javascript的实现代码:
(function (doc, win) { var docel = doc.documentelement, resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientwidth = docel.clientwidth; if (!clientwidth) return; if(clientwidth>=640){ docel.style.fontsize = '100px'; }else{ docel.style.fontsize = 100 * (clientwidth / 640) + 'px'; } }; if (!doc.addeventlistener) return; win.addeventlistener(resizeevt, recalc, false); doc.addeventlistener('domcontentloaded', recalc, false); })(document, window);
此代码选640px为基准值,为什么选640呢,
640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iphone 5使用的是retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的css逻辑像素数为320 x 568px。
所以当要切移动端的页面的时候,需要把效果图宽度等比例缩放到640px。
比如当页面中某一div的宽度为60,高度为65的时候,就可以直接这样写样式:
{ width:0.6rem; height:0.65rem }
浏览器的兼容性
rem是css3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:mozilla firefox 3.6+、apple safari 5+、google chrome、ie9+和opera11+。只是可怜的ie6-8无法,你们就把他们当透明了吧,我向来都是如此。
不过使用单位设置字体,可不能完全不考虑ie了,如果你想使用这个rem,但也想兼容ie下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现ie6-8下的效果,然后使用“rem”来实现代浏览器的效果。就让ie6-8不能随文字的改变而改变吧,谁让这个ie6-8这么老呢?大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。
完整实例代码:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <meta content="telephone=no" name="format-detection" /> <meta name="format-detection" content="email=no" /> <meta http-equiv="cache-control" content="no-cache"/> <title>响应式布局</title> <style> html{font-size: 20px;width: 100%;height: 100%;} body{margin: 0;padding: 0;} header,footer{width: 100%;background: #17a578;color: #fff;font-size:1rem;text-align: center;line-height: 2rem;} .footer{position: fixed;bottom: 0;} .box{} .public{width: 5rem;height: 5rem;font-size: 1.2rem;display: inline-block;text-align: center;color: #fff;line-height: 5rem;margin-top: 1rem;} .left{background: #f00;} .center{background: #048f74;} .right{background: #000;} </style> </head> <body> <header>页面头部</header> <div class="box"> <div class="public left">左</div> <div class="public center">中</div> <div class="public right">右</div> <div class="public left">左</div> <div class="public center">中</div> <div class="public right">右</div> </div> <footer class="footer">页面底部</footer> <script> //orientationchange方向改变事件 (function (doc, win) { var docel = doc.documentelement,//根元素html //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。 resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientwidth = docel.clientwidth; if (!clientwidth) return; //把document的fontsize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。 docel.style.fontsize = 20 * (clientwidth / 320) + 'px'; }; //alert(docel) if (!doc.addeventlistener) return; win.addeventlistener(resizeevt, recalc, false);//addeventlistener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值 doc.addeventlistener('domcontentloaded', recalc, false)//绑定浏览器缩放与加载时间 })(document, window); //alert(document.documentelement.clientwidth/320) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 图片故事,她好不一定你也好。
下一篇: 早恋,这个真的可以有,恶搞校园早恋图片