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

　　自(zì)适應網頁設計(jì)（Adaptive Web Desi∞Ω∏∞gn）指能(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à)小(x₩δ'iǎo)的(de)設備上(shàng)呈現(xiàn)同樣的(de)✔φλλ網頁？

　　手機(jī)的(de)屏幕比較小(xiǎo)，寬度通(tōng)常在6¶σ✘00像素以下(xià)；PC的(de)屏幕寬度，一(yī)般都(dōu)在1↔•000像素以上(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ò)固然保證了(l© e)效果，但(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)& ☆quot;一(yī)次設計(jì)，普遍适用(y≥↓¶₹òng)"，讓同一(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ín©σ ←g)。

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

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