響應式和(hé)自(zì)适應的(de)區(qū)别

玩(wán)前端也(yě)有(yǒu)幾個(gè)月(yuè)了(le)，發現§★✔(xiàn)大(dà)家(jiā)普遍混淆了(l'←≈ e)響應式和(hé)自(zì)适應的(de)®π概念。先給大(dà)家(jiā)體(tǐ)驗一(yī)下(xià)響應≥¥λ‌式和(hé)自(zì)适應的(de)區(qū)别，請(qǐng)§Ω™放(fàng)大(dà)縮小(xiǎo)一(yī)下(xià)屏幕嘗試

自(zì)适應的(de)體(tǐ)驗http://m.ctrip.com/h >tml5/ 
響應式的(de)體(tǐ)驗 http://segme↓‌γ←ntfault.com/

整理(lǐ)了(le)幾篇自(zì)适應和(hé)響應式的(‍≈de)文(wén)章(zhāng)，摘抄并修改了(le)一(yī)下™£∞®(xià)，請(qǐng)大(dà)家(jiā ₩​)欣賞：

起初，網頁設計(jì)者都(dōu)會(huì)設計&>δ¥(jì)固定寬度的(de)頁面，最開(kāi)始的(de)電(diàn)₹÷腦(nǎo)顯示器(qì)分(fēn)辨率種類不(bù)₹÷≤<多(duō)，因為(wèi)當時(shí)電σβ&(diàn)腦(nǎo)本來(lái)就(j‍γδ$iù)少(shǎo)，即使有(yǒu)變化(huà)也(yě)是(sh↑σ₹©ì) 800 850 870 880。比如(rú) 開(kāi)源中國≈β(guó)的(de)網頁就(jiù)是(shì)固定寬度為(• wèi)998來(lái)定制(zhì)的(de ₽)。至于為(wèi)什(shén)麽是(shì) 99©←¶÷8，請(qǐng) @紅(hóng)薯

後來(lái)随著(zhe)顯示器(qì)越來(lái)越多(& φduō)，以及筆(bǐ)記本的(de)普及，這(zhè)種方式的(d♦<e)頁面出現(xiàn)了(le)問(wδ↓èn)題。于是(shì)出現(xiàn)了∏§<(le)一(yī)種新的(de)布局方式寬度自(zì₩↑≠)适應布局。我們平時(shí)談論的(de)自(zì)适應布局，大(dβΩà)多(duō)指的(de)就(jiù)是(shì)寬  ↓¶度自(zì)适應布局。

在這(zhè)種布局下(xià)，出現(xiàn)了(le)兩派：

百分(fēn)比寬度布局

流式布局

題主說(shuō)的(de)是(shì)第&  一(yī)派，寬度使用(yòng)百分(fēn&£)比，文(wén)字使用(yòng) em，現(xiàn)在也γ₹♠(yě)很(hěn)多(duō)開(kāi)始使用(yòng)★ ♣>rem了(le)，也(yě)就(jiù)是(sh™Ωì)所謂的(de)高(gāo)清方案。第二派的(de)布局以 iGoogle πφ為(wèi)代表（已經停止）。

一(yī)開(kāi)始沒有(yǒu)響應式布局這(zhè)個​©λ(gè)詞語，但(dàn)是(shì)慢(‌€ màn)慢(màn)出現(xiàn)了(le)一(yī)個ε↓(gè)詞——漸進增→₹‍強，新詞的(de)出現(xiàn)總是(shì)伴随的(de)舊 ♣σ≈(jiù)詞一(yī)起出現(xiàn)。就(jiù)好(hǎ≤§​♥o)比 3G 出現(xiàn)之前，沒人(rén)管自±ε™(zì)己的(de)手機(jī)叫 2G，所∏✘ 以，3G 和(hé) 2G 兩個(gè)詞是(shì)一(yī<≠δ)起出現(xiàn)的(de)（技(jì)術(shù)上(&£¥shàng)當然2G技(jì)術(shù)先出現(xiàn)）。同理(l ε¥ǐ)，漸進增強出現(xiàn)後，另一(yī)個(gè)詞「∏ ¶優雅降級」也(yě)随之出現(xiàn)了(le)。

詞的(de)意思可(kě)以自(zì)己看(k ®àn) wiki、Google，我隻在這(zhè)兒(ér)舉一(yī)個(✘♦gè)例子(zǐ)，gmail 和(hé) qqmaiλ₩₽ l。

他(tā)倆的(de)寬度都(dōu)是(shì) 100%，都(dōu)是䮣(shì)自(zì)适應。但(dàn)是(shì)：

qqmail 就(jiù)是(shì) css hack 的(de)完§φ§↔美(měi)體(tǐ)現(xiàn)，你(nǐ)用(yò↔"£ng)任何一(yī)個(gè)浏覽器(qì)，幾乎可(kě)以看(k₩≥πàn)到(dào)同一(yī)個(gè)樣子(zǐ)的™↓<♥(de)郵箱，騰訊的(de)前端工(gōng)程師(s™πhī)們用(yòng)各種 css hack 技(jì)術(∏©φ™shù)來(lái)展示郵箱頁面，為(wèi)的(de)是(shì)統₹§©一(yī)的(de)用(yòng)戶體(tǐ)驗。↓÷£β

而 gmail 使用(yòng)了(le)漸進增強，你(nǐ)的(de)浏覽↓"φ器(qì)越強，你(nǐ)看(kàn)到(d♥☆ào)的(de)效果就(jiù)越好(hǎo)，用(yòng)戶體(tǐ)驗就≠π≥©(jiù)越好(hǎo)。

再後來(lái)，就(jiù)是(shì)大(dà)β>家(jiā)都(dōu)熟知(zhī)的(de) Google ♠ 發布了(le) android，于是(shì)互聯網大(dà)戰從(cóng₩α) PC 打到(dào)了(le)手機(j÷•ī)。還(hái)有(yǒu) HTML5 标準的(de)發布。

手機(jī)雖然屏幕變小(xiǎo)了(le)，但→÷δ(dàn)是(shì)卻提供了(le)更豐富的(de)功能(nén×®★g)。還(hái)記得(de)以前用(yòn✘∏g)諾基亞上(shàng) QQ 的(de)事(shì)兒(ér∞×≤γ)嗎(ma)？我們訪問(wèn)的(de)是(shì↔•) 3g.qq.com，當時(shí)我使用(yòng)的(de)是φγ(shì)中興的(de)手機(jī)，訪問(wèn) w✘≤≤σap.qq.com，在後來(lái)的(de)智能(néng÷​)手機(jī)都(dōu)是(shì)訪問(wèn) m.qq¶←≠.com。

不(bù)禁有(yǒu)人(rén)問(wè®±εαn)「真的(de)需要(yào)為(wèi)每個(gè)手機(♣×¥jī)分(fēn)别設計(jì)一(yī)個±δαφ(gè)網頁嗎(ma)？」、「真的(de)需要(yào)為(wèi)手機 <(jī)和(hé)電(diàn)腦(nǎo)設計(jì)不(bù'>∑)同的(de)網頁嗎(ma)？」，解決方法當然有(yǒu)很✘"(hěn)多(duō)種，可(kě)以看(kàn)看(kàn)↔¥'Ω css zen garden（《Css秘密花(huā)園》還(hái)是(♣β€shì)很(hěn)不(bù)錯(cuò)的(de)'÷±一(yī)本書(shū)，也(yě)附帶有(yǒ≤✔u)網址http://www.csszengarden.com/∏​，值得(de)一(yī)看(kàn)）， 相(xià$>₩ng)信做(zuò)過前端的(de)都(dōu)‍α看(kàn)過這(zhè)個(gè)網站(zhàn)，一(yī)個(gè)→×≠£神奇的(de)網站(zhàn)。

最終的(de)解決方案勝出者是(shì)響應式布局。

響應式布局被大(dà)家(jiā)熟知(zhī)的(de$✘β')一(yī)個(gè)重要(yào)原因就(jiù)是(s←€≠hì) twitter 開(kāi)源了(le) bootstrap。±​Google 第一(yī)次完成了(le)從<←≥(cóng)先驅到(dào)烈士。

下(xià)面再從(cóng)直觀一(y≥"←↔ī)點的(de)來(lái)看(kàn)，響應式♦δ↔→和(hé)自(zì)适應的(de)區(qū)±​别：

首先兩種方式解決問(wèn)題的(de)是(shì)不(bù)φ×λ一(yī)樣的(de)。

自(zì)适應是(shì)為(wèi)了(le)解決如(rú)何才↕×∏能(néng)在不(bù)同大(dà)小(xiǎo)的(d×δe)設備上(shàng)呈現(xiàn)同樣的(de)₽§εφ網頁

手機(jī)的(de)屏幕比較小(xiǎo)，寬度通(tδ→ōng)常在600像素以下(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ī)件(j$✔iàn)容易的(de)事(shì)。

很(hěn)多(duō)網站(zhàn)的(de)解決方法，是(shìδ←)為(wèi)不(bù)同的(de)設備∞↓提供不(bù)同的(de)網頁，比如(rú)專門(mén‌☆)提供一(yī)個(gè)mobile版本，或者i →Phone / 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)"，讓同一(yī)張網頁自(zì)動适應不(bù>¶)同大(dà)小(xiǎo)的(de)屏幕，根據屏幕寬度，自(zì)β♠≤動調整網頁內(nèi)容大(dà)小(xiǎo)♠∑π​

但(dàn)是(shì)無論怎樣，他(tā)們主體(tǐ)的(de•₽≥)內(nèi)容和(hé)布局是(shì)沒有(yǒu)變↑"€↕的(de)。

響應式的(de)概念應該覆蓋了(le)自(zì)适應，而&®且涵蓋的(de)內(nèi)容更多(duō) ←©。

自(zì)适應還(hái)是(shì)暴露出一(yī)個(gè)αλ問(wèn)題，如(rú)果屏幕太小(xiǎ‍ δo)，即使網頁能(néng)夠根據屏幕大(dà)小(xiǎo)進 ₹♣行(xíng)适配，但(dàn)是(shì)會(hu↑​ì)感覺在小(xiǎo)屏幕上(shàng)查看(kàn)，內(nèi)容過于♦φ"擁擠，響應式正是(shì)為(wèi)了(↔≈le)解決這(zhè)個(gè)問(wèn)≥¥ •題而衍生(shēng)出來(lái)的(de)概念。它可♣βγ₩(kě)以自(zì)動識别屏幕寬度、并做(zuò)出相(xiφ∏'àng)應調整的(de)網頁設計(jì)，布✘"局和(hé)展示的(de)內(nèi)容可(kě)能(néng)會(hε♥→∑uì)有(yǒu)所變動。如(rú)果下(xià)¶←≈±面的(de)網址，屏幕寬度大(dà)于1300像素，則6張圖片并排在一(yī)× 行(xíng)。

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

如(rú)果屏幕寬度在400像素到(dào)6♥♦00像素之間(jiān)，則導航欄移到(d×¥♠εào)網頁頭部。

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

mediaqueri.es上(shàng)面有(yǒu)更多(duō)這(zhè)樣的(de)例子(zǐ•₩£)。

說(shuō)了(le)一(yī)大(dà)堆，其實大(dà)家(jiā)♠Ω可(kě)能(néng)更多(duō)的(de)是(s✔®hì)關心如(rú)何去(qù)實現(xià®≥•n)。下(xià)面來(lái)聊一(yī)聊實現(xiàn)方↑≈π式：

1.允許網頁寬度自(zì)動調整

"自(zì)适應網頁設計(jì)"到(dào)底是(sh×π ì)怎麽做(zuò)到(dào)的(de)？其實并不(bù)難↓★☆。

首先，在網頁代碼的(de)頭部，加入一(yī)行(xíng)viewport元标簽。

　　<meta name="Ω←♣↔viewport" content="width=de÷ vice-width, initial-→≈λscale=1" />

viewport是(shì)網頁默認的(de)寬度和(hé)高(gāo☆★​γ)度，上(shàng)面這(zhè)行(xíπσ ng)代碼的(de)意思是(shì)，網頁寬度默₩¥認等于屏幕寬度（width=device-width），原始縮放≤∑(fàng)比例（initial-scale=1）為(wèi)1.0，φσ∞↑即網頁初始大(dà)小(xiǎo)占屏幕面積的εφ(de)100%。

所有(yǒu)主流浏覽器(qì)都(dōu)支持這(zhè)個(gè)設置，∑Ω→✔包括IE9。對(duì)于那(nà)些(xiē)老(lǎo)式浏覽器(qì)（φ§主要(yào)是(shì)IE6、7、8），需要(yào)使用(yò§Ωng)css3-mediaqueries.js。

　　<!--[if lt IE 9]>
　　　　<script src="http://→♦ ≥css3-mediaqueries-js.go'₹​oglecode.com/svn/trunk¥εΩ/css3-mediaqueries.js"></s↑¥εcript>
　　<![endif]-->

2、盡量少(shǎo)使用(yòng)絕對(duì)寬度

由于網頁會(huì)根據屏幕寬度調整布局，所以不(bù)能(nén"✘↕g)使用(yòng)絕對(duì)寬度的(de)布局，也(yě)不(bù)能(∑☆±©néng)使用(yòng)具有(yǒu)♣↓<絕對(duì)寬度的(de)元素。這(zhè)一(yī)條非常重要(π∏yào)。

具體(tǐ)說(shuō)，CSS代碼不(bù)能(néng)指定像₹ ‌素寬度：

　　width:xxx px;

通(tōng)過指定百分(fēn)比寬度來(lái)替代< ™✘：同時(shí)還(hái)可(kě)以配合css的≠​φ©(de)cal，進行(xíng)計(jì)算(suàn)寬 "​β度

　　width: xx%;

或者

　　width:auto;

3、相(xiàng)對(duì)大(dà)小(xiǎo)的(de↕'β♠)字體(tǐ)

字體(tǐ)也(yě)不(bù)能(néng)使用(yòng)絕對₩♦∏(duì)大(dà)小(xiǎo)（px），₽✘而隻能(néng)使用(yòng)相(xiàng)對(duì)大(dà)小(↑✘∞xiǎo)（em）或者高(gāo)清方案（rem）,remα©不(bù)局限于字體(tǐ)大(dà)小(xiǎo)∑™≤，前面的(de)寬度width也(yě)可(kě)以使用(yòng)，代←φ替百分(fēn)比。

　　body {
　　　　font: normal 100% Helveti¶₹ca, Arial, sans-serif;
　　}

上(shàng)面的(de)代碼指定，字體(tǐ)大(dà)小®☆∑(xiǎo)是(shì)頁面默認大(dà)小(₹λ>xiǎo)的(de)100%，即16像素。

　　h1 {
　　　　font-size: 1.5e₽♥m; 
　　}

然後，h1的(de)大(dà)小(xiǎo)是(shì∞§)默認大(dà)小(xiǎo)的(de)1.5倍，即24像素（♥‌λ"24/16=1.5）。

　　small {
　　　　font-size: 0.875em;
　　}

small元素的(de)大(dà)小(xiǎo)是(shì)默認大(dà)小Ωσ∏•(xiǎo)的(de)0.875倍，即14像素（14/16=0.87★γγ5）。

4、流動布局（fluid grid）

"流動布局"的(de)含義是(shì)，各個(gè)區(qū)塊的(de)位置都(☆∞dōu)是(shì)浮動的(de)，不(b♦γ ×ù)是(shì)固定不(bù)變的(de)。更多(duō)內(nèi)容請♠​(qǐng)查看(kàn)流動布局的(de)文(wén<★γ)章(zhāng)。

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

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

float的(de)好(hǎo)處是(shì)，如(rú)果寬度太小(xiǎo)，σ••放(fàng)不(bù)下(xià)兩個(gè)元素，後面的™ππ∞(de)元素會(huì)自(zì)動滾動到(dà≈₽o)前面元素的(de)下(xià)方，不(bù)會(huì)在水(shuǐ)平 ≠&方向overflow（溢出），避免了(le)水(shσ<β★uǐ)平滾動條的(de)出現(xiàn)。

另外(wài)，絕對(duì)定位（position: absolu¶‍te）的(de)使用(yòng)，也(yě₽±)要(yào)非常小(xiǎo)心。

5、選擇加載CSS

"自(zì)适應網頁設計(jìδ↓÷ )"的(de)核心，就(jiù)λα是(shì)CSS3引入的(de)Media Query模塊。

它的(de)意思就(jiù)是(shì)，自(zì)動探測屏幕寬度，然後加載相 ♥<(xiàng)應的(de)CSS文(wénλ×‍)件(jiàn)。

　　<link rel="stylesheet" t↓≥≠ ype="text/css"
　　　　media="scre☆₽≠en and (max-device-width: 400px)&qφ≤βuot;
　　　　href="tinyScreen.css" /απ>

上(shàng)面的(de)代碼意思是(shì✘<₩€)，如(rú)果屏幕寬度小(xiǎo)于400像素（max∞≠-device-width: 400px），就(jiù)加載tiny↔∞∑Screen.css文(wén)件(jiàn)。

　　<link rel="stylesheetβ∞β∞" type="tex→•∏t/css"
　　　　media="screen and (min-width©€•: 400px) and (max-deviσ← ce-width: 600px)"
　　　　href="smallScreen.css&qu↕Ω&&ot; />

如(rú)果屏幕寬度在400像素到(dào)6¶¶₹ 00像素之間(jiān)，則加載smallScreen.css文(wén)件(♥↑jiàn)。

除了(le)用(yòng)html标簽加載CSS文(wé δ←n)件(jiàn)，還(hái)可(kě)以在現(x₹₩iàn)有(yǒu)CSS文(wén)件(jiàn)中加載©γ®。

　　@import url("tinyScreen.↓>α©css") screen and (max-de<↑↕λvice-width: 400px);

6、CSS的(de)@media規則

同一(yī)個(gè)CSS文(wén)件(jiàn§φ ¶)中，也(yě)可(kě)以根據不(bù)同的(de)屏幕分(fēn)辨♦$率，選擇應用(yòng)不(bù)同的(de)CSS規→← ←則。

　　@media screen and (max-dev>↕ice-width: 400px) {

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

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}

上(shàng)面的(de)代碼意思是(shì)，如(rú)果屏幕寬度小(x✔∞"iǎo)于400像素，則column塊取消浮動（float:​≤♠none）、寬度自(zì)動調節（width:auto），s♦¥↓idebar塊不(bù)顯示（display:none）。

7、圖片的(de)自(zì)适應（fluid image）↔₽ε​

除了(le)布局和(hé)文(wén)本，"自(zì)适應§£網頁設計(jì)"還(hái)必須實現(x✘↔iàn)圖片的(de)自(zì)動縮放(fàng)。

這(zhè)隻要(yào)一(yī)行(xíng)CSS代碼：

　　img { max-width: 100%;}

這(zhè)行(xíng)代碼對(duì)于大(dà)多(duō)數(sh'∞α•ù)嵌入網頁的(de)視(shì)頻(pín)也(yě)有(yǒ®∞‌♦u)效，所以可(kě)以寫成：

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

老(lǎo)版本的(de)IE不(bù)支持max-width，所以隻↓λε好(hǎo)寫成：

　　img { width: 100%; }

此外(wài)，windows平台縮放(fàn£Ωg)圖片時(shí)，可(kě)能(néng)出現(xiàn)圖像失±™真現(xiàn)象。這(zhè)時(shí)，可(kě)以嘗試使用(yòng★₩‌♣)IE的(de)專有(yǒu)命令：

　　img { -ms-interpolation-mode: Ω£'bicubic; }

或者，Ethan Marcotte的(de)imgSizer.js。

　　addLoadEvent(function() {

　　　　var imgs = document.δ"•getElementById("content"≈♦ ";).getElementsByTagName(&qu✔✔$ot;img");

　　　　imgSizer.collate(imσΩ≥ gs);

　　});

不(bù)過，有(yǒu)條件(jiàn)的(d€™​e)話(huà)，最好(hǎo)還(hái)是(shì)根據↔↔不(bù)同大(dà)小(xiǎo)的(de)屏•δβ幕，加載不(bù)同分(fēn)辨率的(de)圖片。有(yǒu)很(hěn)多(duō)方法可(kě)以做(zuò)到(dào)這(zhè)一(yī)☆‌條，服務器(qì)端和(hé)客戶端都(dōu)可♦≈(kě)以實現(xiàn)。