響應式網頁設計和自適應網頁設計之間的差異

響應式布局
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

自適應  
本詞條由“科普中國”百科科學詞條編寫與應用工作項目 審核 。
自適應就是在處理和分析過程中，根據處理數據的數據特征自動調整處理方法、處理順序、處理參數、邊界條件或約束條件，使其與所處理數據的統計分布特征、結構特征相適應，以取得最佳的處理效果的過程。
自適應過程是一個不斷逼近目標的過程，它所遵循的途徑以數學模型表示，稱為自適應算法。通常采用基于梯度的算法，其中最小均方誤差算法(即LMS算法)尤為常用。

響應式網頁設計和自適應網頁設計都是制作方法多設備友好的網站工作上的各種屏幕尺寸。而響應式網頁設計谷歌推薦的是比較受歡迎的方法，這些方法都為多設備網頁設計都有各自的優點和缺點。

讓我們響應和自適應網頁設計之間的差異看，專門針對這些關鍵領域：

易開發
控制你的設計水平
設備/屏幕支持的廣度
未來的友好的解決方案
整體的下載速度和網站性能

一些定義
在我們進入我們的并排比較敏感和自適應的網頁設計，讓我們來回顧一下這兩種方法的一個高層次的定義。
網站響應有一個流體布局，適應變化，無論屏幕大小使用。媒體查詢讓敏感的網站，甚至改變“對飛”，如果瀏覽器大小。
自適應設計中采用基于預先確定的固定大小的斷點提供最適當的布局版本的屏幕尺寸時檢測到的頁面第一次加載。
在這些寬泛的定義，讓我們把我們的重點關注領域。

易開發
最顯著的差異響應和自適應網頁設計，這些解決方案被應用到一個網站的方法。因為響應式設計創造了一個完全的流體布局，最好用在你那里的項目重新設計的網站，從地上爬起來。

試圖改造一個現有的網站的代碼的反應往往是一個折磨人的事情因為你根本沒有，你會如果你開發代碼從無到有，以響應的設計考慮到這一過程的早期階段有控制的水平。這意味著當你改造網站是有求必應，你不得不為了保持在現有代碼庫做出妥協。

如果你是一個現有的固定寬度的網站，一個自適應的方法意味著你可以離開大小，站點的設計和添加額外的完整需要自適應的斷點。在某些情況下，如果一個項目的預算是小的，如果它只能容納少量的開發工作，你可以選擇只為更小的屏幕大小/移動為中心添加新的自適應斷點。這意味著你將允許更大的屏幕都使用相同的布局-也許一個斷點960版本是什么，可能是最初設計的網站。

上行自適應的方法是，你可以更好地利用現有網站的代碼，但一個缺點是，你的每個斷點你選擇支持創建不同的布局模板。這將需要開發和維護這一解決方案在長期的工作量的影響。

設計控制

一個網站的響應的長處在于它們的流動性使它們適應和支持所有的屏幕尺寸相對于只有預先設置的斷點在自適應方法確定。然而現實，是響應網站看起來偉大在某些關鍵的屏幕尺寸（一般尺寸符合流行的設備在市場上可用的），但視覺設計往往打破了那些流行的決心之間。

例如，一個網站可能看起來偉大在1400像素的寬屏幕布局，960像素中的屏幕尺寸，以及小屏幕看480像素，但對于在這些大小州之間的？作為一個設計師，你將沒法控制這些尺寸，這些尺寸的頁面視覺效果往往不太理想之間。

自適應網站，你有更多的設計在不同的版面被使用因為它們是基于你建立的斷點固定尺寸控制。那些尷尬的各州之間是不成問題的任何更長的時間因為你精心設計的每一個“看”（即每個斷點的顯示），將提供給游客。

作為這一級別的設計控制的吸引力可能聲音，你必須意識到它是有代價的。是的，你必須在每個斷點神色的完全控制，但這就意味著你必須投資要求每個人獨特的布局設計時間。更多的斷點，你選擇的設計，更多的時候你需要花上 過程。

廣泛的支持

響應和自適應網站設計欣賞漂亮的強大的支持，尤其是在現代瀏覽器。

自適應網站需要的服務器端組件或JavaScript的屏幕尺寸檢測。顯然，如果自適應站點需要JavaScript，它意味著一個瀏覽器需要有該網站的正常工作，使。這可能不是一個主要關注你因為大多數人會在他們的瀏覽器的JavaScript，但任何時候一個網站有什么關鍵的依賴，應該注意。

響應式網站和媒體查詢，他們的權力將在所有現代瀏覽器的工作。唯一的問題是你會最早版本的IE自從版本8及以下的不支持媒體查詢。在這個工作一個JavaScript polyfill是經常使用的，，這意味著有一個依賴于JavaScript的這里，至少對那些過時的版本的IE瀏覽器，這可能不是很關心你，特別是如果你的網站分析表明你不使用這些老版本的瀏覽器收到許多游客。

未來的友好

響應網站的流體性質，讓他們在自適應網站的優勢，當談到未來的友好。這是因為那些敏感的部位不是用來容納只有先前建立的設置斷點。他們適應所有屏幕，包括那些不可能真的在今天的市場。這意味著響應的網站將不需要“固定”如果一個新的屏幕分辨率突然變得流行。

在裝置的景觀令人難以置信的品種（截至8月2015，有超過24000個不同的Android設備市場上，有一個網站）不適應這種大范圍的屏幕未來的友好是非常重要的。這是因為，景觀是不太可能在未來獲得更多元化，這意味著特定的屏幕大小設計將成為可能，如果我們尚未達到現實。

在這個對比場景的另一面，如果一個網站是自適應的，它不適應新的決議，可能會成為市場的重要，那么你可能被迫添加斷點到你的網站了。這增加了設計開發的時間到項目，這意味著那些自適應網站必須持續監控以確保沒有新的斷點已被引入市場，必須添加到網站。再次，與設備的多樣性是什么，要不斷檢查新的大小和可能的適應他們新的斷點是一個持續的挑戰，會影響你的工作必須支持網站為公司或組織，維護的成本為他們的網站是。

性能

響應網頁設計一直被指責（在許多情況下是不公平的，是一個貧窮的解決方案）下載速度/性能的角度來看。這主要是由于這種方法的早期，許多網頁設計師只是在小屏幕媒體查詢到一個網站的現有的CSS。這迫使大屏幕將所有器械的圖片資源，即使那些較小的屏幕，沒有使用他們的最終布局。響應式設計現在的和現實的走過了漫長的道路，質量可靠的網站今天不遭受性能問題。

下載速度慢和臃腫的網站是不是一個敏感的網站問題-這是一個問題，可以在所有的網站找到。太大的圖像，從社會媒體供稿，過度的腳本和更重的網站，但響應和自適應網站可以建立能快速加載。當然， 他們可在不使績效優先，但這不是一個特點的解決方案本身，而是反映了團隊參與開發的網站本身。

除了布局        

一種自適應的網頁設計中最引人注目的方面是，你不僅在設置斷點設計網站的控制，而且已經交付這些網站版本資源。例如，這意味著視網膜圖像可以只發送給視網膜設備，而非視網膜屏獲得更合適的圖像這是更小的文件大小。其他網站的資源（JavaScript文件，CSS樣式，等等）可以靈活地交付只有當他們需要時，將使用。

使用自適應網頁設計遠遠超出了簡單的方程，“如果你正在更新網站，自適應可能是一個更簡單的方式。”所有的網站，包括完整的重新設計，可以從一個更聰明的方法有利于更有針對性的經驗。

這種情況表明微妙的性質這一“響應與適應”的爭論。誠然，一個自適應的方法可能更適合于敏感部位的改造，它也可以是一個偉大的解決方案，完全重新設計。同樣的，在某些情況下，一個積極的方法，可以添加到現有網站的代碼庫，讓現場的充分響應方法的所有好處。

哪種方法更好？

說到響應和自適應網頁設計，沒有明確的“贏家”，雖然反應肯定是更受歡迎的方法。事實上，“更好”的方法依賴于一個特定的項目需求。此外，這并不是一個“非此即彼”的情況。有許多網絡專業人員誰是建筑工地，結合最好的響應式網頁設計（流體的寬度，未來支持）和自適應設計的優勢（網站資源更好的設計控制，智能加載）。

俗稱RESS（與服務器端組件的響應式網頁設計），這種做法表明，真的是沒有“一刀切的解決方案。“響應式網頁設計和適應性都有各自的優點和挑戰，所以你需要確定哪一個更適合你的特定的項目，或者一個混合的解決方案可能適合你。

牧羊人設計文章推薦：

網頁設計師如何找到客戶

網頁制作中移動文字6個規則

如何完善你的網站收益

網頁設計師提高個人品牌