onresize

1 window.onresize = function (ev) {
2      console.log('尺寸发生改变！');
3  };
4 
5 window.addEventListener('resize', function (ev) {
6     console.log('尺寸发生改变！');
7 });

 1  /*
 2      当屏幕的宽度>=960时，页面的背景颜色为红色；
 3      当屏幕的宽度>=640时，页面的背景颜色为蓝色；
 4      当屏幕的宽度<640时，页面的背景颜色为绿色？
 5     */
 6 
 7     window.addEventListener('load', function (ev) {
 8         changeColor();
 9         // 1. 监听窗口的尺寸发生改变
10         window.addEventListener('resize', changeColor);
11 
12         function changeColor(ev1) {
13             if(myTool.client().width >= 960){
14                 document.body.style.backgroundColor = 'red';
15             }else if(myTool.client().width >= 640){
16                 document.body.style.backgroundColor = 'blue';
17             }else {
18                 document.body.style.backgroundColor = 'green';
19             }
20         }
21     });

 1  client: function() {
 2             if(window.innerWidth){ // ie9+ 最新的浏览器
 3                 return {
 4                     width: window.innerWidth,
 5                     height: window.innerHeight
 6                 }
 7             }else if(document.compatMode === "CSS1Compat"){ // W3C
 8                 return {
 9                     width: document.documentElement.clientWidth,
10                     height: document.documentElement.clientHeight
11                 }
12             }
13             return {
14                 width: document.body.clientWidth,
15                 height: document.body.clientHeight
16             }
17         }