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

玩前端也有(yǒu)幾個(gè)月了，發現大(dà)家(jiā)普遍混淆了響應式和(hé)自适應的概念。先給大(dà)家(jiā)體(tǐ)驗一下響應式和(hé)自适應的區(qū)别，請(qǐng)放大(dà)縮小(xiǎo)一下屏幕嘗試

自适應的體(tǐ)驗http://m.ctrip.com/html5/ 
響應式的體(tǐ)驗 http://segmentfault.com/

整理(lǐ)了幾篇自适應和(hé)響應式的文章，摘抄并修改了一下，請(qǐng)大(dà)家(jiā)欣賞：

起初，網頁設計(jì)者都會(huì)設計(jì)固定寬度的頁面，最開(kāi)始的電(diàn)腦(nǎo)顯示器(qì)分辨率種類不多(duō)，因為(wèi)當時(shí)電(diàn)腦(nǎo)本來(lái)就少(shǎo)，即使有(yǒu)變化也是 800 850 870 880。比如 開(kāi)源中國的網頁就是固定寬度為(wèi)998來(lái)定制(zhì)的。至于為(wèi)什麽是 998，請(qǐng) @紅薯

後來(lái)随着顯示器(qì)越來(lái)越多(duō)，以及筆記本的普及，這種方式的頁面出現了問題。于是出現了一種新的布局方式寬度自适應布局。我們平時(shí)談論的自适應布局，大(dà)多(duō)指的就是寬度自适應布局。

在這種布局下，出現了兩派：

百分比寬度布局

流式布局

題主說的是第一派，寬度使用百分比，文字使用 em，現在也很(hěn)多(duō)開(kāi)始使用rem了，也就是所謂的高(gāo)清方案。第二派的布局以 iGoogle 為(wèi)代表（已經停止）。

一開(kāi)始沒有(yǒu)響應式布局這個(gè)詞語，但(dàn)是慢慢出現了一個(gè)詞——漸進增強，新詞的出現總是伴随的舊(jiù)詞一起出現。就好比 3G 出現之前，沒人(rén)管自己的手機叫 2G，所以，3G 和(hé) 2G 兩個(gè)詞是一起出現的（技(jì)術(shù)上(shàng)當然2G技(jì)術(shù)先出現）。同理(lǐ)，漸進增強出現後，另一個(gè)詞「優雅降級」也随之出現了。

詞的意思可(kě)以自己看 wiki、Google，我隻在這兒舉一個(gè)例子，gmail 和(hé) qqmail。

他倆的寬度都是 100%，都是自适應。但(dàn)是：

qqmail 就是 css hack 的完美體(tǐ)現，你(nǐ)用任何一個(gè)浏覽器(qì)，幾乎可(kě)以看到同一個(gè)樣子的郵箱，騰訊的前端工程師(shī)們用各種 css hack 技(jì)術(shù)來(lái)展示郵箱頁面，為(wèi)的是統一的用戶體(tǐ)驗。

而 gmail 使用了漸進增強，你(nǐ)的浏覽器(qì)越強，你(nǐ)看到的效果就越好，用戶體(tǐ)驗就越好。

再後來(lái)，就是大(dà)家(jiā)都熟知的 Google 發布了 android，于是互聯網大(dà)戰從 PC 打到了手機。還(hái)有(yǒu) HTML5 标準的發布。

手機雖然屏幕變小(xiǎo)了，但(dàn)是卻提供了更豐富的功能。還(hái)記得(de)以前用諾基亞上(shàng) QQ 的事兒嗎？我們訪問的是 3g.qq.com，當時(shí)我使用的是中興的手機，訪問 wap.qq.com，在後來(lái)的智能手機都是訪問 m.qq.com。

不禁有(yǒu)人(rén)問「真的需要為(wèi)每個(gè)手機分别設計(jì)一個(gè)網頁嗎？」、「真的需要為(wèi)手機和(hé)電(diàn)腦(nǎo)設計(jì)不同的網頁嗎？」，解決方法當然有(yǒu)很(hěn)多(duō)種，可(kě)以看看 css zen garden（《Css秘密花(huā)園》還(hái)是很(hěn)不錯的一本書(shū)，也附帶有(yǒu)網址http://www.csszengarden.com/，值得(de)一看）， 相信做(zuò)過前端的都看過這個(gè)網站(zhàn)，一個(gè)神奇的網站(zhàn)。

最終的解決方案勝出者是響應式布局。

響應式布局被大(dà)家(jiā)熟知的一個(gè)重要原因就是 twitter 開(kāi)源了 bootstrap。Google 第一次完成了從先驅到烈士。

下面再從直觀一點的來(lái)看，響應式和(hé)自适應的區(qū)别：

首先兩種方式解決問題的是不一樣的。

自适應是為(wèi)了解決如何才能在不同大(dà)小(xiǎo)的設備上(shàng)呈現同樣的網頁

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

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

于是，很(hěn)早就有(yǒu)人(rén)設想，能不能"一次設計(jì)，普遍适用"，讓同一張網頁自動适應不同大(dà)小(xiǎo)的屏幕，根據屏幕寬度，自動調整網頁內(nèi)容大(dà)小(xiǎo)

但(dàn)是無論怎樣，他們主體(tǐ)的內(nèi)容和(hé)布局是沒有(yǒu)變的。

響應式的概念應該覆蓋了自适應，而且涵蓋的內(nèi)容更多(duō)。

自适應還(hái)是暴露出一個(gè)問題，如果屏幕太小(xiǎo)，即使網頁能夠根據屏幕大(dà)小(xiǎo)進行(xíng)适配，但(dàn)是會(huì)感覺在小(xiǎo)屏幕上(shàng)查看，內(nèi)容過于擁擠，響應式正是為(wèi)了解決這個(gè)問題而衍生(shēng)出來(lái)的概念。它可(kě)以自動識别屏幕寬度、并做(zuò)出相應調整的網頁設計(jì)，布局和(hé)展示的內(nèi)容可(kě)能會(huì)有(yǒu)所變動。如果下面的網址，屏幕寬度大(dà)于1300像素，則6張圖片并排在一行(xíng)。

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

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

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

mediaqueri.es上(shàng)面有(yǒu)更多(duō)這樣的例子。

說了一大(dà)堆，其實大(dà)家(jiā)可(kě)能更多(duō)的是關心如何去實現。下面來(lái)聊一聊實現方式：

1.允許網頁寬度自動調整

"自适應網頁設計(jì)"到底是怎麽做(zuò)到的？其實并不難。

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

　　<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是網頁默認的寬度和(hé)高(gāo)度，上(shàng)面這行(xíng)代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為(wèi)1.0，即網頁初始大(dà)小(xiǎo)占屏幕面積的100%。

所有(yǒu)主流浏覽器(qì)都支持這個(gè)設置，包括IE9。對于那(nà)些(xiē)老式浏覽器(qì)（主要是IE6、7、8），需要使用css3-mediaqueries.js。

　　<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->

2、盡量少(shǎo)使用絕對寬度

由于網頁會(huì)根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有(yǒu)絕對寬度的元素。這一條非常重要。

具體(tǐ)說，CSS代碼不能指定像素寬度：

　　width:xxx px;

通(tōng)過指定百分比寬度來(lái)替代：同時(shí)還(hái)可(kě)以配合css的cal，進行(xíng)計(jì)算(suàn)寬度

　　width: xx%;

或者

　　width:auto;

3、相對大(dà)小(xiǎo)的字體(tǐ)

字體(tǐ)也不能使用絕對大(dà)小(xiǎo)（px），而隻能使用相對大(dà)小(xiǎo)（em）或者高(gāo)清方案（rem）,rem不局限于字體(tǐ)大(dà)小(xiǎo)，前面的寬度width也可(kě)以使用，代替百分比。

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

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

　　h1 {
　　　　font-size: 1.5em; 
　　}

然後，h1的大(dà)小(xiǎo)是默認大(dà)小(xiǎo)的1.5倍，即24像素（24/16=1.5）。

　　small {
　　　　font-size: 0.875em;
　　}

small元素的大(dà)小(xiǎo)是默認大(dà)小(xiǎo)的0.875倍，即14像素（14/16=0.875）。

4、流動布局（fluid grid）

"流動布局"的含義是，各個(gè)區(qū)塊的位置都是浮動的，不是固定不變的。更多(duō)內(nèi)容請(qǐng)查看流動布局的文章。

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

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

float的好處是，如果寬度太小(xiǎo)，放不下兩個(gè)元素，後面的元素會(huì)自動滾動到前面元素的下方，不會(huì)在水(shuǐ)平方向overflow（溢出），避免了水(shuǐ)平滾動條的出現。

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

5、選擇加載CSS

"自适應網頁設計(jì)"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，然後加載相應的CSS文件。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

上(shàng)面的代碼意思是，如果屏幕寬度小(xiǎo)于400像素（max-device-width: 400px），就加載tinyScreen.css文件。

　　<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

如果屏幕寬度在400像素到600像素之間(jiān)，則加載smallScreen.css文件。

除了用html标簽加載CSS文件，還(hái)可(kě)以在現有(yǒu)CSS文件中加載。

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

6、CSS的@media規則

同一個(gè)CSS文件中，也可(kě)以根據不同的屏幕分辨率，選擇應用不同的CSS規則。

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

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

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}

上(shàng)面的代碼意思是，如果屏幕寬度小(xiǎo)于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

7、圖片的自适應（fluid image）

除了布局和(hé)文本，"自适應網頁設計(jì)"還(hái)必須實現圖片的自動縮放。

這隻要一行(xíng)CSS代碼：

　　img { max-width: 100%;}

這行(xíng)代碼對于大(dà)多(duō)數(shù)嵌入網頁的視(shì)頻也有(yǒu)效，所以可(kě)以寫成：

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

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

　　img { width: 100%; }

此外，windows平台縮放圖片時(shí)，可(kě)能出現圖像失真現象。這時(shí)，可(kě)以嘗試使用IE的專有(yǒu)命令：

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

或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {

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

　　　　imgSizer.collate(imgs);

　　});

不過，有(yǒu)條件的話(huà)，最好還(hái)是根據不同大(dà)小(xiǎo)的屏幕，加載不同分辨率的圖片。有(yǒu)很(hěn)多(duō)方法可(kě)以做(zuò)到這一條，服務器(qì)端和(hé)客戶端都可(kě)以實現。