何為自適應設計？何為響應式設計？ 關於自適應設計和響應式設計，設計師的最佳選擇是什麼？
最近接到的幾個頁面需求後台都做了自適應布局，這並不是第一次接觸到自適應布局和響應式布局等名詞，但是沒有仔細研究，概念也不是很清晰，對於他們的了解一直是乙個懵懂的狀態，藉此機會自己查閱了很多資料，研究了一下他們的區別、優缺點、來鞏固自己頭腦中的概念，增加知識積累，也方便日後查閱。（此總結只關注兩種布局的優缺點、適用的產品，暫不討論實現具體方式。）
先科普乙個下文頻繁用到的概念，視口：使用者瀏覽資訊螢幕尺寸大小（每乙個視口後面都是真實一位的使用者）
先說共同點，兩者都是優化適應網際網路中越來越分化的視口瀏覽體驗，用技術來使頁面適應不同解析度的視口的設計。
響應式設計是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端—而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。（下午左，一版設計適應所有終端）
自適應設計指能使網頁自適應顯示在不同大小終端裝置上新網頁設計方式及技術。（下圖右，三款設計稿適應三類終端）
區別：響應式設計實現原理（responsive design）
是為不同類別得物理裝置建立相同的網頁（pc、平板、手機、手錶等），檢測到裝置解析度大小後呼叫相應的網頁。（技術成本最高）
自適應設計實現原理（adaptive design ）
是為同類別的物理裝置建立三種不同的網頁（pc），檢測到裝置解析度大小後呼叫相應的網頁。（可以只適應pc不同解析度，比如設定四檔位寬度990、1200、1500、1710技術成本較低）
例項：響應式與自適應設計的各自特點：
響應式布局乙個設計稿支援當下不同終端主流視口的資訊適配展示，（但是為了開發效率和一定的可控行依然會針對當下主流不同物理終端優化出乙個最大值視口pc（web端）→ 智慧型手錶（小屏裝置）
以下通過拖拉瀏覽器視窗大小來體驗
例項： （36氪）
同時適配web+手機/智慧型手錶
標籤導航在視口接近最大手持終端裝置視口時改變為經典的抽屜式導航
**框架布局會根據視口來調整位置
面對不同解析度裝置靈活性強
能夠快捷解決多裝置顯示適應問題
缺點：
僅適用布局、資訊、框架並不複雜的部門型別**
相容各種裝置工作量大，效率低下
**累贅，會出現隱藏無用的元素，載入時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
一定程度上改變了**原有的布局結構，會出現使用者混淆的情況
在實際應用上，可以說自適應布局設計是響應式的窮兄弟，當下仍以單個終端（例如web端）為主，也是現在web端最成熟，應用最多的適配視口的解決方案。
例項：天貓**） 自適應980 1230二檔視口
例項：樂視） 自適應980 1180 1380 四檔視口
例項： （愛奇藝） 自適應980 1180 1380 1920 四檔視口
例項：網易體育） 自適應960 1200二檔視口
自適應**標誌
大多只是適配單個終端的主流n個主流視口（2-3個）
當視口大小低於設定的最小視口時，介面會出現顯示不全，溢位，並出現橫向滑動指示器
總體框架不變，橫線布局的板塊大多會有所減少
對**的複雜程度相容性更大
實施起來代價更低，
**更高效
測試更容易，運營相對更精準（可控性更高）
缺點：
在移動端設計大行其道之下，同乙個**，往往需要為不同的裝置開發不同的頁面，增加開發成本
其實這是複雜型別**設計的一種最優方案，雖然增加了開發運營成本，但是換回了更精準的運營、框架擴充套件度更高，使用者載入更迅速，是極其划算的一件事情，這也是自適應設計成為當下主流**採用的布局方式的重要原因之一
它們應該如何服務於我們的設計呢？
理論上來說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切實際。
自適應布局可以讓你的設計更加可控，因為你只需要考慮幾種狀態就萬事大吉了。但在響應式布局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的，這樣一來就很難確切搞清你的設計會是什麼樣。同時這也帶來了測試上的難題，你很難有絕對的把握**到它會怎樣。換個角度說，這也是響應式布局的魅力所在。相比較來說自適應布局有它自己的優勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。
其實，無論是哪種設計理念都是各有優缺點，具體的選擇還是要從團隊/專案實際需求出發去選擇。
響應式和自適應的區別
玩前端也有幾個月了，發現大家普遍混淆了響應式和自適應的概念。先給大家體驗一下響應式和自適應的區別，請放大縮小一下螢幕嘗試 自適應的體驗 響應式的體驗 起初，網頁設計者都會設計固定寬度的頁面，最開始的電腦顯示器解析度種類不多，因為當時電腦本來就少，即使有變化也是 800 850 870 880。比如 ...
什麼是響應式布局和自適應式布局 區別
2.響應式布局和自適應式布局區別 響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新網頁...
自適應與相應式有什麼區別
先給大家體驗一下響應式和自適應的區別，請放大縮小一下螢幕嘗試 自適應的體驗 響應式的體驗 自適應是為了解決如何才能在不同大小的裝置上呈現同樣的網頁，比如我們css用到的rem就是自適應。根據根元素的fontsize來自動調整大小。響應式是讓同一張網頁自動適應不同大小的螢幕，根據螢幕寬度，自動調整網頁...