上海網絡公司做得很多作品，都遇到這個問題：如何做一個能試用各種分辨率的網站？以適應各種分辨率的顯示器？

 

隨著3G的(de)普及(ji)，越(yue)來(lai)越(yue)多的(de)人使(shi)用手(shou)機上網。

移(yi)動(dong)設(she)備(bei)正超過桌(zhuo)面設(she)備(bei)，成(cheng)為訪問互聯網的最常見終(zhong)端。于是(shi)，網頁(ye)設(she)計師不得不面對(dui)一(yi)個(ge)難題(ti)：如何才能(neng)在不同大小的設(she)備(bei)上呈現同樣的網頁(ye)？

手機的(de)屏(ping)幕(mu)比較小(xiao)，寬(kuan)度(du)通常在(zai)600像(xiang)素(su)以下(xia)；PC的(de)屏(ping)幕(mu)寬(kuan)度(du)，一(yi)般都(dou)在(zai)1000像(xiang)素(su)以上(shang)（目(mu)前主(zhu)流寬(kuan)度(du)是(shi)1366×768），有的(de)還(huan)達到了2000像(xiang)素(su)。同樣的(de)內容，要在(zai)大小(xiao)迥異的(de)屏(ping)幕(mu)上(shang)，都(dou)呈現(xian)出滿(man)意的(de)效果，并不是(shi)一(yi)件容易的(de)事。

很多網(wang)(wang)站的解(jie)決方法，是(shi)為不同(tong)的設備(bei)提供不同(tong)的網(wang)(wang)頁，比(bi)如(ru)專門提供一個(ge)(ge)(ge)mobile版本，或(huo)者iPhone / iPad版本。這樣(yang)做(zuo)固然保證了(le)效(xiao)果(guo)，但是(shi)比(bi)較麻煩，同(tong)時要維護好(hao)幾個(ge)(ge)(ge)版本，而且(qie)如(ru)果(guo)一個(ge)(ge)(ge)網(wang)(wang)站有多個(ge)(ge)(ge)portal（入口(kou)），會大大增加架構設計的復雜度(du)。

于是，很早就有人(ren)設想，能(neng)(neng)不能(neng)(neng)"一(yi)次設計，普遍(bian)適(shi)用"，讓同一(yi)張網頁自動適(shi)應不同大小的屏幕，根據屏幕寬度(du)，自動調整布局(ju)（layout）？

一、"自適應網頁設計"的概念

2010年(nian)，Ethan Marcotte提出了（Responsive Web Design）這個(ge)名(ming)詞，指可以(yi)自動識別屏幕寬度、并(bing)做出相應調(diao)整的網頁設(she)計。

他制作了一個，里(li)面是《福爾摩斯(si)歷險記(ji)》六個主人(ren)公的頭像。如果屏(ping)幕寬度大于1300像素，則6張圖片并排在一行。

如果屏幕寬度(du)在600像素(su)到1300像素(su)之(zhi)間，則6張圖片分成兩行。

如果(guo)屏幕(mu)寬度在400像素(su)(su)到600像素(su)(su)之(zhi)間，則導航欄移到網頁頭部。

如果(guo)屏幕(mu)寬度在400像素(su)以(yi)下(xia)，則(ze)6張圖片分成三行(xing)。

上(shang)面有更多這(zhe)樣的例子。

這里還有一個，可以在一張網頁上，同時顯示不同分辨率屏幕的測試效果，我推薦安裝。
 

二、允許網頁寬度自動調整

"自適應網頁設計"到底是怎么做(zuo)到的(de)？其實(shi)并不難。

首先(xian)，在(zai)網頁(ye)代(dai)碼的頭部(bu)，加入一(yi)行(xing)。

是網(wang)頁默(mo)認的寬(kuan)度(du)和高度(du)，上面(mian)這行代碼的意思是，網(wang)頁寬(kuan)度(du)默(mo)認等于屏(ping)幕寬(kuan)度(du)（width=device-width），原(yuan)始縮放比(bi)例（initial-scale=1）為1.0，即(ji)網(wang)頁初始大小(xiao)占屏(ping)幕面(mian)積的100%。

所(suo)有(you)主流瀏覽(lan)器都支持這個設置，包括IE9。對于(yu)那些老(lao)式瀏覽(lan)器（主要是(shi)IE6、7、8），需要使(shi)用。

三、不使用絕對寬度

由于網頁會(hui)根據屏幕寬(kuan)度調整布局(ju)，所以(yi)不能(neng)使用絕對(dui)寬(kuan)度的(de)布局(ju)，也(ye)不能(neng)使用具有絕對(dui)寬(kuan)度的(de)元素。這一(yi)條非常重要。

具體說(shuo)，CSS代(dai)碼不能指定像素寬度(du)：

width:xxx px;

只能指定百分(fen)比(bi)寬(kuan)度：

width: xx%;

或者

width:auto;

四、相對大小的字體

字(zi)體也不能(neng)使用絕對(dui)大小（px），而只能(neng)使用相對(dui)大小（em）。

body {
font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代(dai)碼指定(ding)，字體大小是頁面默認大小的100%，即16像素(su)。

h1 {
font-size: 1.5em;
}

 然(ran)后，h1的(de)大小(xiao)是默認大小(xiao)的(de)1.5倍，即24像素（24/16=1.5）。

small {
font-size: 0.875em;
}

small元素(su)的大(da)小是默認大(da)小的0.875倍，即14像素(su)（14/16=0.875）。

五、流動布局（fluid grid）

的(de)含義(yi)是(shi)，各個區(qu)塊(kuai)的(de)位置都(dou)是(shi)浮動的(de)，不是(shi)固(gu)定不變(bian)的(de)。

.main {
float: right;
width: 70%;
}

.leftBar {
float: left;
width: 25%;
}

的好處是，如(ru)果寬度太小，放不(bu)下兩個元(yuan)素(su)，后(hou)面(mian)的元(yuan)素(su)會(hui)自(zi)動(dong)滾動(dong)到前面(mian)元(yuan)素(su)的下方，不(bu)會(hui)在水(shui)平(ping)方向(xiang)overflow（溢出），避免了水(shui)平(ping)滾動(dong)條的出現。

另外，絕對定位（position: absolute）的(de)使用(yong)，也要非常小(xiao)心。

六、選擇加載CSS

"自適應(ying)網(wang)頁設計"的核心，就是(shi)CSS3引入的模(mo)塊。

它的意思就是，自動探測屏幕寬度(du)，然后(hou)加載相(xiang)應(ying)的CSS文件。

media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />

上面的代碼意思(si)是，如(ru)果屏幕寬度小(xiao)于400像(xiang)素（max-device-width: 400px），就加(jia)載tinyScreen.css文件(jian)。

media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />

如果屏幕寬(kuan)度在400像(xiang)素(su)到600像(xiang)素(su)之間(jian)，則(ze)加載smallScreen.css文件。

除了(le)用html標(biao)簽加載(zai)CSS文件，還可以在現有CSS文件中加載(zai)。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS的@media規則

同(tong)(tong)一個CSS文件中，也可以(yi)根(gen)據不同(tong)(tong)的(de)屏(ping)幕分(fen)辨(bian)率，選擇應用(yong)不同(tong)(tong)的(de)CSS規則(ze)。

 @media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}

}

上面的代碼意思是，如果屏(ping)幕寬(kuan)(kuan)度(du)小于400像(xiang)素(su)，則(ze)column塊取消浮動（float:none）、寬(kuan)(kuan)度(du)自動調節（width:auto），sidebar塊不顯示（display:none）。

八、圖片的自適應（fluid image）

除了布局和(he)文本，"自適(shi)應(ying)網頁(ye)設(she)計"還(huan)必須實(shi)現圖(tu)片的(de)。

這只要一行CSS代(dai)碼(ma)：

img { max-width: 100%;}

這行代碼對于大多(duo)數嵌入網頁(ye)的視頻也(ye)有效(xiao)，所以可以寫成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好寫成：

img { width: 100%; }

此外，windows平臺縮放(fang)圖片(pian)時，可能出現(xian)圖像失真現(xian)象(xiang)。這時，可以嘗試使用(yong)IE的：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

不(bu)過，有條件的(de)話，最好還是根據(ju)不(bu)同(tong)大小的(de)屏幕，加載不(bu)同(tong)分辨率的(de)圖片(pian)。有可以做(zuo)到(dao)這一(yi)條，服務器端(duan)和客戶端(duan)都可以實現。