比較兩種不同的多設備網頁設計方法
響應性和自適應網頁設計都是創建多種設備友好的網站的方法，這些網站可以在各種屏幕尺寸上很好地工作。 雖然響應式網頁設計是由Google推薦的，並且是兩種方法中較為流行的方法，但這些用於多設備網頁設計的方法都有其優點和缺點。
讓我們來看看響應式和自適應網頁設計之間的差異，特別關注這些關鍵領域：
- 易於開發
- 您對設計的控製程度
- 設備/屏幕支持的廣度
- 解決方案未來友好如何
- 總體下載速度和網站性能
一些定義
在我們對響應式和自適應網頁設計進行並排比較之前，讓我們花點時間看看這兩種方法的高級定義。
無論使用的屏幕大小如何，響應式網站都有一個流暢的佈局，可以進行更改和調整。 如果瀏覽器調整大小， 媒體查詢允許響應式網站甚至“即時”更改。
自適應設計使用基於預先確定的斷點的固定尺寸來為頁面第一次加載時檢測到的屏幕尺寸提供最合適的版面版本。
有了這些廣泛的定義，讓我們轉向我們關注的重點領域。
發展的便利
響應式和自適應式網頁設計之間最顯著的區別在於這些解決方案適用於網站。 由於響應式設計會創建完全流暢的佈局，因此最適合用於從頭開始重新設計網站的項目。 試圖改進現有網站的代碼以提高響應速度通常是一件棘手的事情，因為如果您從頭開始編寫代碼並在該過程的最早階段考慮響應式設計，那麼您根本沒有控制級別。 這意味著，當您對網站進行改造以響應時，您必須做出妥協才能保留在現有的代碼庫中。
如果您正在使用現有的固定寬度網站，則適應性方法意味著您可以保留網站的完整設計大小，並根據需要添加其他自適應斷點。 在某些情況下，如果一個項目的預算很小，並且它只能適應少量的開發工作，那麼您可以選擇僅為小屏幕/以移動為中心的大小添加新的自適應斷點。 這意味著你會允許更大的屏幕都使用相同的佈局 - 可能是960斷點版本，這是該網站最初設計的版本。
自適應方法的優點是您可以更好地利用現有網站的代碼，但其中一個缺點是您要為您選擇支持的每個斷點創建不同的佈局模板。 這將對長期開發和維護此解決方案所需的工作量產生影響。
設計控制
響應式網站的優勢之一是它們的流暢性使其能夠適應並支持所有屏幕尺寸，而不是僅適應性方法中確定的預設斷點。 然而，現實情況是，響應式網站可能在某些關鍵屏幕尺寸（通常與市場上流行的設備相對應的尺寸）方面看起來不錯，但視覺設計往往在這些流行的分辨率之間出現中斷。
例如，一個網站在1400像素的寬屏幕佈局，960像素的中等屏幕尺寸和480像素的小屏幕時可能看起來很棒，但這些尺寸的中間狀態又如何呢？ 作為一名設計師，你幾乎無法控制這些中間尺寸，而這些尺寸的頁面視覺效果往往不盡如人意。
通過自適應網站，您可以對使用的各種佈局進行更多的設計控制，因為它們是基於您建立的斷點的固定大小。 那些尷尬的中間狀態不再是問題，因為你仔細設計了每個“外觀”（意思是每個斷點的顯示），這些外觀將被傳遞給訪問者。
儘管這種級別的設計控制聽起來很有吸引力，但您必須意識到它的價格。 是的，您可以完全控制每個斷點的外觀，但這意味著您必須投入設計時間來為每個獨特佈局進行設計。 您選擇設計的斷點越多，您需要花費的時間就越多。
支持的廣度
響應式和自適應網頁設計都享有非常強大的支持，特別是在現代瀏覽器中。
自適應網站需要服務器端組件或Javascript來進行屏幕大小檢測。 顯然，如果一個自適應網站需要Javascript，這意味著瀏覽器需要啟用它才能使該網站正常工作。 這可能不是你主要關心的問題，因為大多數人在他們的瀏覽器中都會使用Javascript，但是任何時候一個站點對任何事物都有嚴格的依賴性，應該注意。
響應式網站和支持它們的媒體查詢在所有現代瀏覽器中都能很好地工作。 自8版及更低版本以來，唯一的問題是使用最舊版本的Internet Explorer，因為它們不支持媒體查詢 。 為了解決這個問題，經常使用Javascript polyfill ，這意味著在這裡也存在對Javascript的依賴，至少對於那些過時的IE版本。 再說一次，這可能不是您關心的問題，特別是如果您的網站分析顯示您沒有收到許多使用這些舊瀏覽器版本的訪問者。
未來友善
響應式網站的流暢性使其在適應性網站方面具有優勢，在涉及未來友好性時更具優勢。 這是因為這些響應站點不是為了僅適應先前建立的一組斷點而構建的。 他們適應所有屏幕 ，包括那些今天可能實際上不在市場上的屏幕 。 這意味著如果新的屏幕分辨率突然流行，那麼響應式網站將不需要“固定”。
考慮到設備領域令人難以置信的多樣性（截至2015年8月，市場上有超過24,000種不同的Android設備），擁有一個能夠適應這種廣泛屏幕的網站對於未來友好性至關重要。 這是因為未來景觀不可能變得更加多樣化，這意味著如果我們還沒有達到這種現實，那麼針對特定屏幕或尺寸的設計將變得不可能。
在這種比較方案的另一方面，如果一個網站具有適應性，並且不適應可能在市場上變得重要的新決議，那麼您可能會被迫將該斷點添加到您創建的網站上。 這增加了項目的設計和開發時間，這意味著必須持續監控那些適應性網站，以確保沒有新的斷點被引入到必須添加到網站上的市場中。 同樣，隨著設備多樣性的不斷變化，必須不斷檢查新的尺寸，並可能為它們提供新的斷點，這是一個持續的挑戰，它將對您必須支持的網站以及維護的成本產生影響該網站所針對的公司或組織。
性能
從下載速度/性能角度來看，響應式網頁設計長期以來一直被認為是一個糟糕的解決方案（在許多情況下是不公平的）。 這主要是因為在這種方法的早期階段，許多網頁設計師只是將小屏幕媒體查詢加入到網站現有的CSS中。 這就強制將用於較大屏幕的圖像和資源傳送到所有設備，即使這些較小的屏幕在最終佈局中並未使用它們。 自那時起，響應式設計已經走過了很長的一段路，現實情況是，質量響應型網站今天不會遇到性能問題。
下載速度慢，網站臃腫不是一個敏感的網站問題 - 這是一個可以在所有網站上找到的問題。 過於沉重的圖像，來自社交媒體，過多的腳本和更多的內容，以及網站的權重，但響應式和自適應網站都可以構建為快速加載。 當然，它們的構建方式也不會使性能成為重中之重，但這不是解決方案本身的特點，而是對參與網站開發的團隊的反映。
超越佈局
自適應網頁設計最引人注目的方面之一是，您不僅可以控制設置斷點的網站設計，還可以控制為這些網站版本提供的資源。 例如，這意味著視網膜圖像只能發送到視網膜設備，而非視網膜屏幕可以獲得更小的文件尺寸的更合適的圖像 。 其他網站資源（Javascript文件，CSS樣式等）只有在需要時才能巧妙地提供並將被使用。
這種自適應網頁設計的使用遠遠超出了“如果您正在改造網站，自適應可能是更簡單的使用方式”的簡單等式。“所有網站，包括完整的重新設計，都可以從更智能的方法中受益，從而獲得更加個性化的體驗。
這種情況表明了這種“響應與適應”辯論的細微差別。 雖然自適應方法可能比現場改造更適合，但它也可以成為全面重新設計的絕佳解決方案。 同樣，在某些情況下，可以將響應方法添加到現有網站的代碼庫中，從而為該網站提供完全響應方法的所有好處。
哪種方法更好？
當談到響應式與自適應式網頁設計時，沒有明確的“贏家”，儘管響應式肯定是更受歡迎的方法。 事實上，“更好”的方法取決於具體項目的需求。 此外，這並不需要是“任何/或”的情況。 有許多網站專業人士正在構建將最佳響應式網頁設計（流體寬度，未來支持）與自適應設計（更好的設計控制，智能加載站點資源）的優勢相結合的網站。
這種方法通常被稱為RESS（具有服務器端組件的響應式網頁設計），這表明實際上沒有“一刀切”的解決方案。響應式網頁設計和自適應都有其優勢和挑戰，因此您需要確定哪一個將最適合您的特定項目，或者如果混合解決方案實際上最適合您。