作為全球先進的科技巨頭，Google 一直推崇響應式網頁設計，並在今年的 4 月 21 日釋出了重大的更新，目的是提高響應式在移動終端上的執行效率。儘管在更新中沒有明確表明您必須使用響應式設計。只是簡單的提示響應式設計擁有不錯的 UX 和優越的效能，是移動設計方面的一個不錯的選擇。
考慮到這一點，讓我們一起來測試一下 “響應式設計” 與 “自適應設計” 在效能和多使用者體驗上各自的利弊。
自移動終端裝置全面普及後，爭論為激烈的是我們在響應式設計，自適應設計和獨立的手機網站（擁有獨自的 M.URL）該做何選擇。基於本文章的討論重點，我們先避開獨立的手機網站不談，因為它似乎不太受設計師和企業的歡迎，可能是因為它必須得單獨建立的原因吧。（前期的開發和後期的維護成本都很大）
兩者的區別？
先，響應式和自適應為關鍵的區別是什麼呢？
簡而言之，響應式就相當於液體，它可以自動適應不同尺寸的螢幕，無論您的裝置尺寸多麼奇葩。響應式使用 CSS media queries 的方法，根據目標裝置自動改變風格如顯示型別, 寬度、高度等，這能很好解決不同螢幕尺寸的顯示問題。
而自適應設計是基於斷點使用靜態佈局，一旦頁面被載入就無法再進行自動適應，自適應會自動檢測螢幕的大小來載入適當的工作佈局，也就是說，當您要採用自適應設計網站時，您得一個一個設計 6 種常見的螢幕布局。
1.320
2.480
3.760
4.960
5.1200
6.1600
顯然，自適應設計需要做更多的工作，您必須至少設計 6 種常見的佈局。而響應式設計可以更好地適應複雜的媒體裝置要求，能很好地解決顯示和效能問題。
特別是後者，這幾年有著諸多的爭議。因為許多網站提供的是完整的桌面模型，即便沒有在移動端載入，但也會明顯拖慢網站的速度。為了解決這一問題，我們可以用 CSS3 的 media queries 解決方案，但會有一些折衷，因為響應式網站無法達到專門的移動網站那樣快。
為什麼使用自適應設計？
自適應可用於改造現有的網站使其更好地適應移動端。這使您的設計可控制和開發多個特定的檢視。您開發檢視的數量完全取決於您，您的公司和全面的預算。然而，它也提供了一定量的控制元件（例如在內容和佈局上），如此您便無須使用響應式設計。
通常, 您先會設計一個低解析度檢視, 制定您自己的方法確保設計不會被內容所限制。
正如前面所提到的，它那六個標準的設計佈局。然而，您可以透過檢視您網站，分析為常用的裝置，然後決定這些檢視該如何設計。
如果您想在 scratch 上從頭設計一個自適應網站也行。從低的解析度開始設計，制定您自己的方法。接著您可以用 CSS3 的 media queries 擴充套件更高解析度的佈局檢視。當您設計多種解析度時您會發現，在改變視窗大小的時候將會 “跳出” 佈局。
自適應網站可以用於設計和開發一個擁有多個自適應檢視的網站。所以這種設計通常用於改造網站。
為什麼使用響應式設計？
現在絕大多數網站都使用響應式設計，它適合缺乏經驗的設計師和開發人員使用。可用的主題可以直接從 CMS 系統（如 WordPress，Joomla 和 Durpal）獲取。
相比自適應網站，響應式網站省去了很多的控制元件，同時也省去了不少建立和維護的功夫。響應式佈局就是一種流體，在按百分比縮放時也能相當的流暢。這也可能再次導致 “跳出” 當您在調整視窗大小時。如下圖，下圖現實的是一個流體佈局，設計師使用百分比縮放時，檢視將會被自動地調整。
使用響應式設計，您要記住所以的佈局。這當然可能會使過程混亂，並且使設計更加複雜。這就意味著您應該專注於中等解析度的檢視，然後再用 media querie 調整為更低或更高的解析度。
所以通常的做法是，在一個新的專案中使用響應式設計，在後期的改造中使用自適應設計。
再三思考
正如前面所討論的, 響應網站會在網站速度有所弊端 (如果他們沒有正確地實現) 。
響應式在編碼時要求也比較嚴格，以確保適應每塊訪它的螢幕。然而額外的工作也是值得商討的，因為自適應設計要求為每一個佈局單獨開發和維護 HTML 和 CSS 程式碼。修改自適應網站也相當麻煩。因為當它實現的時候您得確保每一個功能（如 SEO 站群，內容和連結）能正常執行。
當然, 您應該也要考慮多使用者體驗。因為響應式基本上打亂了周圍的內容以確保流暢符合裝置視窗, 您需要特別注意的是視覺層次結構設計, 因為它周圍的內容已被打亂。
根據 Amy Schade 的觀點，響應式設計往往會造成另外一個難題，那就是如何重組大頁面的元素以適應既小有長的頁面，反之亦然。然而，單是確保元素適應頁面是遠遠不夠的。為了響應式設計更加成功，設計也必須確保螢幕的解析度和尺寸能夠適應。
所以，無論您採用哪種技術都沒有捷徑可言，都需要確保所建立的網站能適應所有的螢幕。響應式稍佔優勢，您無須花大量的時間在網站的維護上。
哪種技術更優越？
歸根結底，重要的是要考慮您多使用者屬於哪類群體，不管您採用哪種設計方式，一旦您知道他們的習慣，知道他們更傾向於用什麼裝置訪問該網站，您在設計您的網站時該採用哪種方式，哪種佈局，想法自然會湧現出來。
很大程度上還取決您是現有的網站還是一個新專案。響應式設計已成為選的設計技術和思想，現在有 1/8 的網站採用響應式設計（雖然這數字不及自適應設計）。響應式設計增長迅猛，幾乎已經達到作為獨立移動網站的相同水平。
記住這點，如果僅僅是考慮螢幕的相容問題，可以有把握的說，那響應式設計通常是選技術。
然而，如果客戶和公司存在預算，自適應設計可能是更好的選擇。根據 Catchpoint 進行的一個測試，他們在 WordPress 建立兩個網站，一個使用標準的 WP TwentyFourteen 響應式主題, 另一個使用一個名為 WiziWordPress APP 的外掛。
外掛基於他們訪問該網站的裝置向多使用者提供了移動主題，還提供了高階的配置選項，這樣就可以進一步簡化整個流程。
結果載入所用的時間如下表：
還應該強調一點，這沒有進行任何最佳化。但這確實表明，響應式網站需要下載桌面所需的東西。如此表明，主題並不能提供很好的效能。
再次強調一下，media queries 可以克服這個問題。至於為什麼使用響應式設計，上面就是一個很好的例子。然而流行並不代表是知名的。在知名的東西出現之前，我們很難知道我們能做什麼，除了學習如何正確的程式碼規範和實現一個很好網站。
結論：
響應式設計將會保持受歡迎的趨勢，這可能是因為我們還沒有找到一個更好解決重大維護和適應性要求。自適應設計也還沒有滅亡，儘管不太受程式設計師的待見。有一點是肯定的，我們將會看到一些改進，完善現階段所出現的問題。替代響應式設計的技術也在不遠將來浮出水面。