網頁寬高自適應大小

現在，顯示器的分辨率愈來愈多，終端也變得多樣化，web開發頁面的自適應問題愈來愈多，若是不作處理，一旦顯示器的分辨率發生變化，展現的內容可能出現許多意料以外的排版問題。關於不一樣終端的展現問題能夠經過響應式佈局來實現，而不須要響應式佈局時咱們須要本身來避免上述問題。

寬度自適應：
一、設置最外層容器（如 DIV）的 width 爲 100%；
二、若是網站頭部有圖片展現，那就不能簡單設置寬度爲 100%，會出現 repeat 的狀況，或者圖片大小超出最外層容器寬度，此時能夠設置最外層容器寬度爲固定值：960px、980px、1000px等，並設置 margin:0 auto ；
三、若是以爲在較大分辨率的顯示器上顯示 960px 寬度顯得不夠大方美觀，能夠根據不一樣的分辨率設置不一樣的寬度（一樣要設置 margin:0 auto），並製做相應大小的圖片替換便可：

   1:  $(function(){

   2:      var screenWidth = window.screen.width;    

   3:      var width;

   4:      var imgURL ;

   5:      if (screenWidth >= 1440) {

   6:          width = "1400px";

   7:          imgURL = "1400.png";

   8:      } else if (1024 < screenWidth && screenWidth < 1440) {

   9:          width = "1200px";

  10:          imgURL = "1200.png";

  11:      } else {

  12:          width = "980px";

  13:          imgURL = "980.png";

  14:      }

  15:      $obj.css("width", width);  //$obj爲要設置寬度的jQuery對象

  16:      $img.css("backgroundImage","url(" + imgURL + ")");  //$img爲要設置背景的jQuery對象

  17:  })

 

高度自適應：
一、可直接設置最外層容器以及 html、body 的 height 爲 100%；
二、有時，網頁的填充內容會根據不一樣的權限或者數據的完整程度顯示出不同的大小，這樣，咱們就須要比較頁面的大小和顯示器的分辨率高度再作相應的調整：

   1:  function autoHeight(objId){

   2:      var nowHeight;

   3:      if (window.innerHeight){//FF

   4:          nowHeight = window.innerHeight;

   5:      }else{

   6:          nowHeight = document.documentElement.clientHeight;

   7:      }

   8:      if(nowHeight > document.body.clientHeight){

   9:          document.getElementById(objId).style.height = nowHeight  + 'px';

  10:      }else{

  11:          document.getElementById(objId).style.height = document.body.clientHeight + 'px';

  12:      }

  13:  }

 

三、若是頁面有頁腳（版權信息等），採用狀況2的方法可能會使頁腳懸於頁面中間，這時，頁面每每會是 header、main、footer 這樣的結構，在外面會有一個外層容器 container，方法2就是設置該外層容器的高度。固然，咱們能夠在獲取到 container 的新的高度以後減去 header 和 footer 的高度就能夠設置 main 的高度了，這樣能夠避免 footer 出如今頁面中間的狀況了。
此外，咱們還有另外一種方式解決 footer 的問題：position。
設置 container 的 position:relative ， main 和 footer 的 position:absolute（其他css屬性略去）：

   1:  #container{

   2:    position:relative;  

   3:  }

   4:   

   5:  #main{

   6:    position:absolute;

   7:    top:80px;    /*header 的高度*/

   8:    bottom:40px;      /*footer 的高度*/

   9:  } 

  10:   

  11:  #footer{

  12:    position:absolute;

  13:    bottom:0;

  14:  }

 

這樣結合上面寬度進行設置時，發現設置了 position 以後，margin:0 auto就失效了，由於脫離了文檔流的緣故，因此咱們須要設置 container 的 margin-left 爲寬度的一半的負值便可，即：

   1:  $(function(){

   2:      var screenWidth = window.screen.width;    

   3:      var width;

   4:      var imgURL ;

   5:      var left;

   6:      if (screenWidth >= 1440) {

   7:          width = "1400px";

   8:          left = "-700px";

   9:          imgURL = "1400.png";

  10:      } else if (1024 < screenWidth && screenWidth < 1440) {

  11:          width = "1200px";

  12:          left = "-600px";

  13:          imgURL = "1200.png";

  14:      } else {

  15:          width = "980px";

  16:          left = "-490px";

  17:          imgURL = "980.png";

  18:      }

  19:      $obj.css({"width": width,"margin-left":left });  //$obj爲要設置寬度的jQuery對象

  20:      $img.css("backgroundImage","url(" + imgURL + ")");  //$img爲要設置背景的jQuery對象

  21:  })