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 }
