作為全球先進(jìn)的科技巨頭，Google一直推崇響應式網(wǎng)頁(yè)設計，并在今年的4月21日發(fā)布了重大的更新，目的是提高響應式在移動(dòng)終端上的運行效率。盡管在更新中沒(méi)有明確表明你必須使用響應式設計。只是簡(jiǎn)單的提示響應式設計擁有不錯的UX和優(yōu)越的性能，是移動(dòng)設計方面的一個(gè)不錯的選擇。

考慮到這一點(diǎn)，讓我們一起來(lái)測試一下“響應式設計”與“自適應設計”在性能和用戶(hù)體驗上各自的利弊。
自移動(dòng)終端設備全面普及后，爭論為激烈的是我們在響應式設計，自適應設計和獨立的手機網(wǎng)站（擁有獨自的M.URL）該做何選擇。基于本文章的討論重點(diǎn)，我們先避開(kāi)獨立的手機網(wǎng)站不談，因為它似乎不太受設計師和企業(yè)的歡迎，可能是因為它必須得單獨創(chuàng )建的原因吧。（前期的開(kāi)發(fā)和后期的維護成本都很大）
兩者的區別？
先，響應式和自適應為關(guān)鍵的區別是什么呢？
簡(jiǎn)而言之，響應式就相當于液體，它可以自動(dòng)適應不同尺寸的屏幕，無(wú)論你的設備尺寸多么奇葩。響應式使用CSS media queries的方法，根據目標設備自動(dòng)改變風(fēng)格如顯示類(lèi)型,寬度、高度等，這能很好解決不同屏幕尺寸的顯示問(wèn)題。
而自適應設計是基于斷點(diǎn)使用靜態(tài)布局，一旦頁(yè)面被加載就無(wú)法再進(jìn)行自動(dòng)適應，自適應會(huì )自動(dòng)檢測屏幕的大小來(lái)加載適當的工作布局，也就是說(shuō)，當你要采用自適應設計網(wǎng)站時(shí)，你得一個(gè)一個(gè)設計6種常見(jiàn)的屏幕布局。
1.320
2.480
3.760
4.960
5.1200
6.1600
顯然，自適應設計需要做更多的工作，你必須至少設計6種常見(jiàn)的布局。而響應式設計可以更好地適應復雜的媒體設備要求，能很好地解決顯示和性能問(wèn)題。
特別是后者，這幾年有著(zhù)諸多的爭議。因為許多網(wǎng)站提供的是完整的桌面模型，即便沒(méi)有在移動(dòng)端加載，但也會(huì )明顯拖慢網(wǎng)站的速度。為了解決這一問(wèn)題，我們可以用CSS3 的media queries解決方案，但會(huì )有一些折衷，因為響應式網(wǎng)站無(wú)法達到專(zhuān)門(mén)的移動(dòng)網(wǎng)站那樣快。
為什么使用自適應設計？
自適應可用于改造現有的網(wǎng)站使其更好地適應移動(dòng)端。這使你的設計可控制和開(kāi)發(fā)多個(gè)特定的視圖。你開(kāi)發(fā)視圖的數量完全取決于你，你的公司和全面的預算。然而，它也提供了一定量的控件（例如在內容和布局上），如此你便無(wú)須使用響應式設計。
通常,你先會(huì )設計一個(gè)低分辨率視圖,制定你自己的方法確保設計不會(huì )被內容所限制。
正如前面所提到的，它那六個(gè)標準的設計布局。然而，你可以通過(guò)查看你網(wǎng)站，分析為常用的設備，然后決定這些視圖該如何設計。
如果你想在scratch上從頭設計一個(gè)自適應網(wǎng)站也行。從低的分辨率開(kāi)始設計，制定你自己的方法。接著(zhù)你可以用CSS3 的media queries擴展更高分辨率的布局視圖。當你設計多種分辨率時(shí)你會(huì )發(fā)現，在改變窗口大小的時(shí)候將會(huì )“跳出”布局。
自適應網(wǎng)站可以用于設計和開(kāi)發(fā)一個(gè)擁有多個(gè)自適應視圖的網(wǎng)站。所以這種設計通常用于改造網(wǎng)站。
為什么使用響應式設計？

現在絕大多數網(wǎng)站都使用響應式設計，它適合缺乏經(jīng)驗的設計師和開(kāi)發(fā)人員使用。可用的主題可以直接從CMS系統（如Wordpress，Joomla和Durpal）獲取。
相比自適應網(wǎng)站，響應式網(wǎng)站省去了很多的控件，同時(shí)也省去了不少建立和維護的功夫。響應式布局就是一種流體，在按百分比縮放時(shí)也能相當的流暢。這也可能再次導致“跳出”當你在調整窗口大小時(shí)。如下圖，下圖現實(shí)的是一個(gè)流體布局，設計師使用百分比縮放時(shí)，視圖將會(huì )被自動(dòng)地調整。

使用響應式設計，你要記住所以的布局。這當然可能會(huì )使過(guò)程混亂，并且使設計更加復雜。這就意味著(zhù)你應該專(zhuān)注于中等分辨率的視圖，然后再用media querie調整為更低或更高的分辨率。
所以通常的做法是，在一個(gè)新的項目中使用響應式設計，在后期的改造中使用自適應設計。
再三思考
正如前面所討論的,響應網(wǎng)站會(huì )在網(wǎng)站速度有所弊端(如果他們沒(méi)有正確地實(shí)現)。
響應式在編碼時(shí)要求也比較嚴格，以確保適應每塊訪(fǎng)它的屏幕。然而額外的工作也是值得商討的，因為自適應設計要求為每一個(gè)布局單獨開(kāi)發(fā)和維護HTML和CSS代碼。修改自適應網(wǎng)站也相當麻煩。因為當它實(shí)現的時(shí)候你得確保每一個(gè)功能（如SEO，內容和鏈接）能正常運行。
當然,你應該也要考慮用戶(hù)體驗。因為響應式基本上打亂了周?chē)膬热菀源_保流暢符合設備窗口,你需要特別注意的是視覺(jué)層次結構設計,因為它周?chē)膬热菀驯淮騺y。
根據Amy Schade的觀(guān)點(diǎn)，響應式設計往往會(huì )造成另外一個(gè)難題，那就是如何重組大頁(yè)面的元素以適應既小有長(cháng)的頁(yè)面，反之亦然。然而，單是確保元素適應頁(yè)面是遠遠不夠的。為了響應式設計更加成功，設計也必須確保屏幕的分辨率和尺寸能夠適應。
所以，無(wú)論你采用哪種技術(shù)都沒(méi)有捷徑可言，都需要確保所創(chuàng )建的網(wǎng)站能適應所有的屏幕。響應式稍占優(yōu)勢，你無(wú)須花大量的時(shí)間在網(wǎng)站的維護上。
哪種技術(shù)更優(yōu)越？
歸根結底，重要的是要考慮你用戶(hù)屬于哪類(lèi)群體，不管你采用哪種設計方式，一旦你知道他們的習慣，知道他們更傾向于用什么設備訪(fǎng)問(wèn)該網(wǎng)站，你在設計你的網(wǎng)站時(shí)該采用哪種方式，哪種布局，想法自然會(huì )涌現出來(lái)。

很大程度上還取決你是現有的網(wǎng)站還是一個(gè)新項目。響應式設計已成為選的設計技術(shù)和思想，現在有1/8的網(wǎng)站采用響應式設計（雖然這數字不及自適應設計）。響應式設計增長(cháng)迅猛，幾乎已經(jīng)達到作為獨立移動(dòng)網(wǎng)站的相同水平。
記住這點(diǎn)，如果僅僅是考慮屏幕的兼容問(wèn)題，可以有把握的說(shuō)，那響應式設計通常是選技術(shù)。
然而，如果客戶(hù)和公司存在預算，自適應設計可能是更好的選擇。根據Catchpoint進(jìn)行的一個(gè)測試，他們在Wordpress創(chuàng )建兩個(gè)網(wǎng)站，一個(gè)使用標準的WP TwentyFourteen響應式主題,另一個(gè)使用一個(gè)名為Wiziapp的插件。
插件基于他們訪(fǎng)問(wèn)該網(wǎng)站的設備向用戶(hù)提供了移動(dòng)主題，還提供了高級的配置選項，這樣就可以進(jìn)一步簡(jiǎn)化整個(gè)流程。
結果加載所用的時(shí)間如下表：

還應該強調一點(diǎn)，這沒(méi)有進(jìn)行任何優(yōu)化。但這確實(shí)表明，響應式網(wǎng)站需要下載桌面所需的東西。如此表明，主題并不能提供很好的性能。
再次強調一下，media queries可以克服這個(gè)問(wèn)題。至于為什么使用響應式設計，上面就是一個(gè)很好的例子。然而流行并不代表是知名的。在知名的東西出現之前，我們很難知道我們能做什么，除了學(xué)習如何正確的代碼規范和實(shí)現一個(gè)很好網(wǎng)站。
結論：
響應式設計將會(huì )保持受歡迎的趨勢，這可能是因為我們還沒(méi)有找到一個(gè)更好解決重大維護和適應性要求。自適應設計也還沒(méi)有滅亡，盡管不太受程序員的待見(jiàn)。有一點(diǎn)是肯定的，我們將會(huì )看到一些改進(jìn)，完善現階段所出現的問(wèn)題。替代響應式設計的技術(shù)也在不遠將來(lái)浮出水面。

http://ezekroy.com/wangzhansheji/4134.html 響應式與自適應設計應該注意什么,設計師怎么規劃響應式與自適應網(wǎng)站