響應式和自適應布局的區別?

　　客戶經常會問響應式布局和自適應布局之間的區別是什么?首先，讓我們了解什么是響應式布局和自適應布局。

　　響應式布局：

　　響應式布局是伊桑·馬科特在2010年5月提出的一個概念。簡言之，一個網站可以兼容多個終端，而不是為每個終端制作特定的版本。這個概念的誕生是為了解決移動互聯網的瀏覽問題。

　　響應式布局可以為不同終端的用戶提供更舒適的界面和更好的用戶體驗，而隨著大屏幕移動設備的普及，已經無法用大勢所趨來形容。隨著越來越多的設計師采用這種技術，我們不僅看到了很多創新，也看到了一些造型圖案。

　　自適應布局：

　　自適應網頁設計(Responsive Web Design)指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。

　　隨著5G的普及，越來越多的人使用手機上網。

　　移動設備正超過桌面設備，成為訪問互聯網的最常見終端。于是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁?

　　手機的屏幕比較小，寬度通常在600像素以下;PC的屏幕寬度，一般都在1000像素以上(目前主流寬度是1366×768)，有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，并不是一件容易的事。

　　很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal(入口)，會大大增加架構設計的復雜度。

　　于是，很早就有人設想，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整布局(layout)。

　　那制作網站的時候“什么樣的網站/項目適合使用自適應布局(固定斷點)?什么樣的網站適合響應式布局?(流體網格)”

　　理論上來說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切實際。

　　自適應布局可以讓你的設計更加可控，因為你只需要考慮了了幾種狀態就萬事大吉了。但在響應式布局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什么樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式布局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到像素級別準確預知你的設計如何在943px×684px視覺區域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特征還是布局結構都有條不紊。

　　自適應布局有其自身的優勢，因為它們實現起來更便宜，也更容易測試，這通常使它們成為更現實的解決方案。適應性布局可以說是響應式布局的“窮兄弟”，在資源有限的情況下可以啟動。在改進現有站點時尤其如此，因為此時完全重寫代碼是不可行的。在這種情況下，自適應布局是一個很好的起點。

　　其實，無論什么樣的設計理念，都有利弊，還是要根據個人的實際需求來選擇!