. 1 window.onresize = function (EV) { 2 the console.log ( 'dimensions have changed!' ); . 3 }; . 4 . 5 window.addEventListener ( 'a resize', function (EV) { . 6 the console.log ( 'dimensions have changed ! ' ); 7 });
1 / * 2 width when the screen is> = 960, the background color of the page is red; 3 when the screen width of> = 640 when the background color of the page is blue; 4 width as the screen 640, the background <page color is green? . 5 * / . 6 . 7 window.addEventListener ( 'Load', function (EV) { . 8 changeColor (); . 9 // 1. listening window size is changed 10 window.addEventListener ( 'a resize' , changeColor); . 11 12 is function changeColor (EV1) { 13 is 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 }