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 window.innerWidth, 5 height: window.innerHeight 6 } 7 }else if(document.compatMode === "CSS1Compat"){ // W3C 8 return { 9 document.documentElement.clientWidth, 10 height: document.documentElement.clientHeight 11 } 12 } 13 return { 14 document.body.clientWidth, 15 height: document.body.clientHeight 16 } 17 }