網頁寬高自適應大小

標籤：高度自適應   style   class   code   color   get   

如今，顯示器的解析度越來越多，終端也變得多樣化，web開發頁面的自適應問題越來越多，如果不做處理，一旦顯示器的解析度發生變化，展示的內容可能出現許多意料之外的排版問題。關於不同終端的展示問題可以通過響應式布局來實現，而不需要響應式布局時我們需要自己來避免上述問題。

寬度自適應：
1、設定最外層容器（如 DIV）的 width 為 100%；
2、如果網站頭部有圖片展示，那就不能簡單設定寬度為 100%，會出現 repeat 的情況，或者圖片大小超出最外層容器寬度，此時可以設定最外層容器寬度為固定值：960px、980px、1000px等，並設定 margin:0 auto ；
3、如果覺得在較大解析度的顯示器上顯示 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:  })

 

高度自適應：
1、可直接設定最外層容器以及 html、body 的 height 為 100%；
2、有時，網頁的填充內容會根據不同的許可權或者資料的完整程度顯示出不一樣的大小，這樣，我們就需要比較頁面的大小和顯示器的解析度高度再做相應的調整：

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

 

3、如果頁面有頁尾（著作權資訊等），採用情況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:  })