自適應網頁設計

　　自(zi)適(shi)應(ying)網(wang)頁設計（Adaptive Web Design）指(zhi)能使網(wang)頁自(zi)適(shi)應(ying)顯示在不同(tong)大小(xiao)終端設備上新網(wang)頁設計方式及(ji)技術(shu)。

產生背景

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

　　移(yi)動(dong)設(she)備正超(chao)過桌面(mian)設(she)備，成為訪(fang)問(wen)互聯(lian)網的(de)(de)最常見終端。于是，網頁設(she)計師(shi)不(bu)得不(bu)面(mian)對一個難題：如何(he)才能(neng)在不(bu)同大(da)小的(de)(de)設(she)備上呈現同樣的(de)(de)網頁？

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

　　很多網(wang)站的(de)解決(jue)方法，是(shi)為(wei)不(bu)同的(de)設(she)備提(ti)供不(bu)同的(de)網(wang)頁，比如專門提(ti)供一(yi)個mobile版(ban)本，或者iPhone / iPad版(ban)本。這樣做(zuo)固然保(bao)證了效果，但是(shi)比較麻煩，同時(shi)要維(wei)護好幾(ji)個版(ban)本，而且如果一(yi)個網(wang)站有多個portal（入口），會大(da)(da)大(da)(da)增加架構設(she)計的(de)復雜(za)度。

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

概念

　　2010年，Ethan Marcotte提出(chu)了(le)“自(zi)適應網(wang)頁設計”(Responsive Web Design)這(zhe)個名詞，指(zhi)可以自(zi)動識別屏幕寬度、并做出(chu)相應調整(zheng)的網(wang)頁設計。 他制作了(le)一個范例，里面是六個主人公的頭像(xiang)。

　　如果屏幕寬度大于1300像(xiang)素(su)，則6張圖片并排(pai)在一(yi)行。

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

　　如果屏幕寬度在400像素到(dao)600像素之間，則導航欄移到(dao)網頁頭(tou)部(bu)。

　　如果屏幕寬(kuan)度(du)在(zai)400像素以下，則6張圖片分成(cheng)三行。