我要评论实际开发过程中，我们经常会被各种宽度，高度计算搞晕。尤其是使用了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论