OnResize

. 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         }

 

Guess you like

Origin www.cnblogs.com/zhangzhengyang/p/11210875.html