作爲全球先進的科技巨頭，Google一(yī)直推崇響應式網頁設計，并在今年的4月21日發布了重大(dà)的更新，目的是提高響應式在移動終端上的運行效率。盡管在更新中(zhōng)沒有明确表明你必須使用響應式設計。隻是簡單的提示響應式設計擁有不錯的UX和優越的性能，是移動設計方面的一(yī)個不錯的選擇。

考慮到這一(yī)點，讓我(wǒ)(wǒ)們一(yī)起來測試一(yī)下(xià)“響應式設計”與“自适應設計”在性能和用戶體(tǐ)驗上各自的利弊。

自移動終端設備全面普及後，争論最爲激烈的是我(wǒ)(wǒ)們在響應式設計，自适應設計和獨立的手機網站（擁有獨自的M.URL）該做何選擇。基于本文章的讨論重點，我(wǒ)(wǒ)們先避開(kāi)獨立的手機網站。

兩者的區别？

首先，響應式和自适應最爲關鍵的區别是什麽呢？

簡而言之，響應式就相當于液體(tǐ)，它可以自動适應不同尺寸的屏幕，無論你的設備尺寸多麽奇葩。響應式使用CSS media queries的方法，根據目标設備自動改變風格如顯示類型,寬度、高度等，這能很好解決不同屏幕尺寸的顯示問題。

而自适應設計是基于斷點使用靜态布局，一(yī)旦頁面被加載就無法再進行自動适應，自适應會自動檢測屏幕的大(dà)小(xiǎo)來加載适當的工(gōng)作布局，也就是說，當你要采用自适應設計網站時，你得一(yī)個一(yī)個設計6種常見的屏幕布局。

1.320

2.480

3.760

4.960

5.1200

6.1600

顯然，自适應設計需要做更多的工(gōng)作，你必須至少設計6種常見的布局。而響應式設計可以更好地适應複雜(zá)的媒體(tǐ)設備要求，能很好地解決顯示和性能問題。

特别是後者，這幾年有着諸多的争議。因爲許多網站提供的是完整的桌面模型，即便沒有在移動端加載，但也會明顯拖慢(màn)網站的速度。爲了解決這一(yī)問題，我(wǒ)(wǒ)們可以用CSS3 的media queries解決方案，但會有一(yī)些折衷，因爲響應式網站無法達到專門的移動網站那樣快。

爲什麽使用自适應設計？

自适應可用于改造現有的網站使其更好地适應移動端。這使你的設計可控制和開(kāi)發多個特定的視圖。你開(kāi)發視圖的數量完全取決于你，你的公司和全面的預算。然而，它也提供了一(yī)定量的控件（例如在内容和布局上），如此你便無須使用響應式設計。

通常,你首先會設計一(yī)個低分(fēn)辨率視圖,制定你自己的方法确保設計不會被内容所限制。

正如前面所提到的，它那六個标準的設計布局。然而，你可以通過查看你網站，分(fēn)析最爲常用的設備，然後決定這些視圖該如何設計。

如果你想在scratch上從頭設計一(yī)個自适應網站也行。從最低的分(fēn)辨率開(kāi)始設計，制定你自己的方法。接着你可以用CSS3 的media queries擴展更高分(fēn)辨率的布局視圖。當你設計多種分(fēn)辨率時你會發現，在改變窗口大(dà)小(xiǎo)的時候将會“跳出”布局。

自适應網站可以用于設計和開(kāi)發一(yī)個擁有多個自适應視圖的網站。所以這種設計通常用于改造網站。

爲什麽使用響應式設計？

現在絕大(dà)多數網站都使用響應式設計，它适合缺乏經驗的設計師和開(kāi)發人員(yuán)使用。可用的主題可以直接從CMS系統（如Wordpress，Joomla和Durpal）獲取。

相比自适應網站，響應式網站省去(qù)了很多的控件，同時也省去(qù)了不少建立和維護的功夫。響應式布局就是一(yī)種流體(tǐ)，在按百分(fēn)比縮放(fàng)時也能相當的流暢。這也可能再次導緻“跳出”當你在調整窗口大(dà)小(xiǎo)時。如下(xià)圖，下(xià)圖現實的是一(yī)個流體(tǐ)布局，設計師使用百分(fēn)比縮放(fàng)時，視圖将會被自動地調整。

使用響應式設計，你要記住所以的布局。這當然可能會使過程混亂，并且使設計更加複雜(zá)。這就意味着你應該專注于中(zhōng)等分(fēn)辨率的視圖，然後再用media querie調整爲更低或更高的分(fēn)辨率。

所以通常的做法是，在一(yī)個新的項目中(zhōng)使用響應式設計，在後期的改造中(zhōng)使用自适應設計。

再三思考

正如前面所讨論的,響應網站會在網站速度有所弊端(如果他們沒有正确地實現)。

響應式在編碼時要求也比較嚴格，以确保适應每塊訪它的屏幕。然而額外(wài)的工(gōng)作也是值得商(shāng)讨的，因爲自适應設計要求爲每一(yī)個布局單獨開(kāi)發和維護HTML和CSS代碼。修改自适應網站也相當麻煩。因爲當它實現的時候你得确保每一(yī)個功能（如SEO，内容和鏈接）能正常運行。

當然,你應該也要考慮用戶體(tǐ)驗。因爲響應式基本上打亂了周圍的内容以确保流暢符合設備窗口,你需要特别注意的是視覺層次結構設計,因爲它周圍的内容已被打亂。

根據Amy Schade的觀點，響應式設計往往會造成另外(wài)一(yī)個難題，那就是如何重組大(dà)頁面的元素以适應既小(xiǎo)有長的頁面，反之亦然。然而，單是确保元素适應頁面是遠遠不夠的。爲了響應式設計更加成功，設計也必須确保屏幕的分(fēn)辨率和尺寸能夠适應。

所以，無論你采用哪種技術都沒有捷徑可言，都需要确保所創建的網站能适應所有的屏幕。響應式稍占優勢，你無須花大(dà)量的時間在網站的維護上。

哪種技術更優越？

歸根結底，最重要的是要考慮你用戶屬于哪類群體(tǐ)，不管你采用哪種設計方式，一(yī)旦你知(zhī)道他們的習慣，知(zhī)道他們更傾向于用什麽設備訪問該網站，你在設計你的網站時該采用哪種方式，哪種布局，想法自然會湧現出來。

很大(dà)程度上還取決你是現有的網站還是一(yī)個新項目。響應式設計已成爲首選的設計技術和思想，現在有1/8的網站采用響應式設計（雖然這數字不及自适應設計）。響應式設計增長迅猛，幾乎已經達到作爲獨立移動網站的相同水平。

記住這點，如果僅僅是考慮屏幕的兼容問題，可以有把握的說，那響應式設計通常是首選技術。

然而，如果客戶和公司存在預算，自适應設計可能是更好的選擇。根據Catchpoint進行的一(yī)個測試，他們在Wordpress創建兩個網站，一(yī)個使用标準的WP TwentyFourteen響應式主題,另一(yī)個使用一(yī)個名爲Wiziapp的插件。

插件基于他們訪問該網站的設備向用戶提供了移動主題，還提供了高級的配置選項，這樣就可以進一(yī)步簡化整個流程。

結果加載所用的時間如下(xià)表：

還應該強調一(yī)點，這沒有進行任何優化。但這确實表明，響應式網站需要下(xià)載桌面所需的東西。如此表明，主題并不能提供很好的性能。

再次強調一(yī)下(xià)，media queries可以克服這個問題。至于爲什麽使用響應式設計，上面就是一(yī)個很好的例子。然而流行并不代表是最好的。在最好的東西出現之前，我(wǒ)(wǒ)們很難知(zhī)道我(wǒ)(wǒ)們能做什麽，除了學習如何正确的代碼規範和實現一(yī)個很好網站。

結論：

響應式設計将會保持受歡迎的趨勢，這可能是因爲我(wǒ)(wǒ)們還沒有找到一(yī)個更好解決重大(dà)維護和适應性要求。自适應設計也還沒有滅亡，盡管不太受程序員(yuán)的待見。有一(yī)點是肯定的，我(wǒ)(wǒ)們将會看到一(yī)些改進，完善現階段所出現的問題。替代響應式設計的技術也在不遠将來浮出水面。

華籁網絡爲您提供南(nán)京網站制作及維護、服務器租用及代維
網站優化推廣、企業郵箱、400電(diàn)話(huà)、畫冊LOGO設計等。

微信号：hualaiwang    郵箱：service#hualay.net
電(diàn)話(huà)：18066075725  /  4006661495
南(nán)京網站建設高品質技術服務商(shāng)