正文
窗口事件onresize
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在做自适应布局的时候，我们常常需要根据窗口不同的分辨率给出不同布局和样式，今天说的onresize便能帮我们实现这一效果。
onresize事件在窗口或者框架的大小发生改变的时候会被调用，下面我们用一个例子来演示。
在这个例子中，我们想要实现的效果是：当屏幕宽度小于500时，页面的背景色为灰色；当屏幕宽度大于等于500时，页面背景为粉色；当屏幕宽度大于等于800时，页面背景为红色。所以，我们首先需要获得屏幕的宽度，需要用到前面封装的client方法。
<script>
function client() {
if(window.innerWidth){
return {
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
} return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}</script>
要根据不同屏幕大小实现不同的效果，需要调用onresize事件。
<script>
window.onload = function () {
window.onresize = function(){
if(client().width >= 800){
document.body.style.backgroundColor = 'red';
}else if(client().width >= 500){
document.body.style.backgroundColor = 'pink';
}else {
document.body.style.backgroundColor = 'gray';
}
};
}
</script>
现在基本功能已经实现，但是，前面一直提到onresize是在屏幕变化的时候才会被触发调用，那么在初始化的时候，没有发生屏幕变化，那么上面的颜色改变就不会被触发，因此，我们需要将上面的代码进行稍微的调整优化。
<script>
window.onload = function () {
var bgColor;
// 初始化的时候触发
changeColor();
// 窗口大小改变是触发
window.onresize = changeColor;
function changeColor() {
if(client().width >= 800){
bgColor = 'red';
}else if(client().width >= 500){
bgColor = 'pink';
}else {
bgColor = 'gray';
}
document.body.style.backgroundColor = bgColor;
}
}
</script>
至此，我们就利用onresize实现了想要的效果了。
完整详细的代码下载：点这里
