根據日常開發經驗及網路相關資料，用簡單易懂的大白話分析自適應跟響應式的差異。註：本文只分析自適應跟響應式的差異以及了解其由來的背景，不在於討論其使用的方法
一、什麼是自適應佈局
自適應佈局就是寬度自適用佈局，在不同大小的裝置上，網頁以等比例的形式縮放寬度，呈現相同的主體內容和排版佈局
自適應佈局演示圖：
隨著螢幕寬度縮放，網頁內容也以等比例縮放，不管螢幕寬度為多少，網頁主體排版佈局總是一樣的
二、什麼是響應式佈局
響應式佈局就是根據螢幕大小變化，頁面的內容排版佈局會自動調整變動，已呈現更好的使用者體驗
響應式佈局演示圖：
隨著螢幕寬度的縮放，頁面做出相應調整，佈局和展示的內容會有所變動
1.自適應佈局出現的背景
在PC時代初期，網頁設計者都會設計固定寬度的頁面，最開始的電腦顯示器解析度種類不多，因為當時電腦本來就少。後來隨著顯示器種類越來越多，以及筆記型電腦、平板電腦的普及，這種固定寬度的頁面出現了問題。於是出現了一種新的佈局方式，寬度自適應佈局。我們平常談論的自適應佈局，大多指的就是寬度自適應佈局
再到後來，網路大戰從PC打到了手機，還有HTML5 標準的發布。自適應版面也從PC延伸到手機，自適應版面也因此火了起來，成為網頁設計的必要需求
2.響應式佈局出現的背景
自適應雖然成為網頁設計的必要需求，但還是暴露出一個問題，如果螢幕太小，即使網頁內容能夠根據螢幕大小進行適配，但是在小螢幕上查看，會感覺內容過於擁擠，降低了用戶體驗。此時，為了解決這個問題而衍生出來的概念就是響應式佈局。它可以自動識別螢幕寬度、並做出相應調整。網頁的排版版面和展示的內容會有所變動
以上就是本文的全部內容，希望對大家的學習有幫助，也希望大家多多支持downcodes.com。