在做自适应布局的时候,我们常常需要根据窗口不同的分辨率给出不同布局和样式,今天说的onresize便能帮我们实现这一效果。
onresize事件在窗口或者框架的大小发生改变的时候会被调用,下面我们用一个例子来演示。
在这个例子中,我们想要实现的效果是:当屏幕宽度小于500时,页面的背景色为灰色;当屏幕宽度大于等于500时,页面背景为粉色;当屏幕宽度大于等于800时,页面背景为红色。所以,我们首先需要获得屏幕的宽度,需要用到前面封装的client方法。
<script> function client() { if(window.innerWidth){ return { window.innerWidth, height: window.innerHeight } }else if(document.compatMode === "CSS1Compat"){ return { document.documentElement.clientWidth, height: document.documentElement.clientHeight } } return { 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实现了想要的效果了。
完整详细的代码下载:点这里