網頁寬高自適應大小

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

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

$(function(){
    var screenWidth = window.screen.width;
    var width;
    var imgURL ;
    if (screenWidth >= 1440) {
        width = "1400px";
        imgURL = "1400.png";
    } else if (1024 < screenWidth && screenWidth < 1440) {
        width = "1200px";
        imgURL = "1200.png";
    } else {
        width = "980px";
        imgURL = "980.png";
    }
    $obj.css("width", width);  //$obj為要設置寬度的jQuery對象
    $img.css("backgroundImage","url(" + imgURL + ")");  //$img為要設置背景的jQuery對象
})

 

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

function autoHeight(objId){
    var nowHeight;
    if (window.innerHeight){//FF
        nowHeight = window.innerHeight;
    }else{
        nowHeight = document.documentElement.clientHeight;
    }
    if(nowHeight > document.body.clientHeight){
        document.getElementById(objId).style.height = nowHeight  + 'px';
    }else{
        document.getElementById(objId).style.height = document.body.clientHeight + 'px';
    }
}

 

3、如果頁面有頁腳（版權信息等），采用情況2的方法可能會使頁腳懸於頁面中間，這時，頁面往往會是 header、main、footer 這樣的結構，在外面會有一個外層容器 container，方法2就是設置該外層容器的高度。當然，我們可以在獲取到 container 的新的高度之后減去 header 和 footer 的高度就可以設置 main 的高度了，這樣可以避免 footer 出現在頁面中間的情況了。
此外，我們還有另一種方式解決 footer 的問題：position。
設置 container 的 position:relative ， main 和 footer 的 position:absolute（其余css屬性略去）：

#container{
  position:relative;
}

#main{
  position:absolute;
  top:80px;    /*header 的高度*/
  bottom:40px;      /*footer 的高度*/
}

#footer{
  position:absolute;
  bottom:0;
}

 

這樣結合上面寬度進行設置時，發現設置了 position 之后，margin:0 auto就失效了，因為脫離了文檔流的緣故，所以我們需要設置 container 的 margin-left 為寬度的一半的負值即可，即：

$(function(){
    var screenWidth = window.screen.width;
    var width;
    var imgURL ;
    var left;
    if (screenWidth >= 1440) {
        width = "1400px";
        left = "-700px";
        imgURL = "1400.png";
    } else if (1024 < screenWidth && screenWidth < 1440) {
        width = "1200px";
        left = "-600px";
        imgURL = "1200.png";
    } else {
        width = "980px";
        left = "-490px";
        imgURL = "980.png";
    }
    $obj.css({"width": width,"margin-left":left });  //$obj為要設置寬度的jQuery對象
    $img.css("backgroundImage","url(" + imgURL + ")");  //$img為要設置背景的jQuery對象
})