窗口事件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实现了想要的效果了。

完整详细的代码下载：点这里

猜你喜欢