自(zì)适應網頁設計(jì)

　　自(zì)适應網頁設計(jì)（Adaptive Web Design）↕指能(néng)使網頁自(zì)适應顯示在不(b₽ù)同大(dà)小(xiǎo)終端設備上(shàng)新網頁設計(jì±)方式及技(jì)術(shù)。

産生(shēng)背景

　　随著(zhe)3G的(de)普及，越來(lái)越多(duō)∑的(de)人(rén)使用(yòng)手機(jī)上(shàng)網。

　　移動設備正超過桌面設備，成為(wèi)訪問(wèn)互聯網的(de)最常見(jiΩàn)終端。于是(shì)，網頁設計(jì)師(shī)不(b‍ù)得(de)不(bù)面對(duì)一(yī)個(gè)難題：如(rú)何才能(néng®)在不(bù)同大(dà)小(xiǎo)的(de)設備上(shàng)呈→現(xiàn)同樣的(de)網頁？

　　手機(jī)的(de)屏幕比較小(xiǎo)，寬度通(tōng)常在60Ω0像素以下(xià)；PC的(de)屏幕寬度，一(yī)般都(dōu)在1000像素以上(sh≤àng)（目前主流寬度是(shì)1366×768），有(yǒu)的(de)還(hái)達×到(dào)了(le)2000像素。同樣的(de)內(nèi)容，要(yào)在大(dà)小(xi↓ǎo)迥異的(de)屏幕上(shàng)，都(dōu)呈現(xiàn)出滿意的(de)效果，并不₹(bù)是(shì)一(yī)件(jiàn)容易的(de)事(shì)。

　　很(hěn)多(duō)網站(zhàn)的(de)解決方法，是(shì)為☆(wèi)不(bù)同的(de)設備提供不(bù)同的(de)網頁，比如(rú)專門(mén∏)提供一(yī)個(gè)mobile版本，或者iPhone / iPad版本。這γ(zhè)樣做(zuò)固然保證了(le)效果，但(πdàn)是(shì)比較麻煩，同時(shí)要(y∏ào)維護好(hǎo)幾個(gè)版本，而且如(rú)果一(yī)個(gè)'網站(zhàn)有(yǒu)多(duō)個(gèφ)portal（入口），會(huì)大(♥dà)大(dà)增加架構設計(jì)的(de)複雜(zá)度。

　　于是(shì)，很(hěn)早就(jiù)有(yǒu)人(rén)設想，能(né ng)不(bù)能(néng)"一(yī)次設計(jì)，普遍适用(yòng)&q‌uot;，讓同一(yī)張網頁自(zì)動适應不(bù)同大(dà)小(xiǎo)的(de)屏$幕，根據屏幕寬度，自(zì)動調整布局（layout）。

概念

　　2010年(nián)，Ethan Marcotte提出了(le)“自(zì)适↑應網頁設計(jì)”(Responsive Web Design)這(z'hè)個(gè)名詞，指可(kě)以自(zì)動識别屏幕寬度、并做$(zuò)出相(xiàng)應調整的(de)網頁設計(jì)。 他("tā)制(zhì)作(zuò)了(le)一(yī)個(gè)範例，裡(lǐ)面是(shì) 六個(gè)主人(rén)公的(de)頭像。

　　如(rú)果屏幕寬度大(dà)于1300像素，則6張圖片并排在一(yī)行(xíng)。

　　如(rú)果屏幕寬度在600像素到(dào)1300像素之間(jiān)，則6張圖∞片分(fēn)成兩行(xíng)。

　　如(rú)果屏幕寬度在400像素到(dào)600像素之間(jiān)，則導航欄移到(dγào)網頁頭部。

　　如(rú)果屏幕寬度在400像素以下(xià)，則6張圖片分(fēn)成三行(xíng)。