js进阶之onresize

常用窗口事件–onresize
当窗口或框架发生改变的时候就会调用;
onresize一般用于自适应页面布局等多屏幕适用场景;
获取屏幕的分辨率：**window.screen.width.screen.height.
典型事件：当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色？

<script>
    // 当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色？
    window.onload = function () {

        var bgColor;

        /*console.log('' + changeColor());
        console.log('' + changeColor);*/

        changeColor();

        window.onresize = changeColor;

        function changeColor() {
            if(client().width >= 960){
                bgColor = 'red';
            }else if(client().width >= 640){
                bgColor =  'blue';
            }else {
                bgColor =  'green';
            }
            document.body.style.backgroundColor = bgColor;
        }
    }
</script>

节流就是在原来的基础上增加一个定时器（较为常用）