響應式

1. 隻需開發一套界面。
2. 對頁面做的屏幕适配是在一定範圍：比如pc端（>1024）一套适配,平闆（768-1024）一套适配，手機端（< 768）一套适配;響應式一套頁面全部适配。（可以想象：響應式設計要考慮的内容要比自适應設計複雜的多）
3. 建立一個網頁，通過CSS Media Query，Content - Based Breakpoint等技術來改變網頁的大小适應不同分辨率的屏幕。

自适應

1. 需要開發多套界面
2. 通過檢測視口分辨率，來判斷當前訪問的設備是：pc端、平闆、手機，從而請求服務層，返回不同的頁面；響應式設計通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現不同的布局和内容。
3. 爲不同類别的設備建立不同的網頁，檢測到設備分辨率大小後調用相應的網頁。

區分響應式和自适應

1. 在電腦端使用浏覽器chrome或edge打開網址。
2. 按 F12 或 右鍵鼠標 選擇 檢測。
3. 點擊面闆左上角裏的設備切換圖標，如下圖

4. 切換後，
   電腦端和手機端顯示的布局自動切換，就是響應式，例如本站；
   如果布局沒有自動适配，刷新頁面後布局才切換适配（網址跳轉或沒有跳轉），就是自适應，例如百度；
   如果刷新也沒有切換，既不是響應式也不是自适應，也就沒有适配不同設備。

建議

• 開發角度：單頁面，功能複雜，采用自适應；功能簡單，采用響應式。
• SEO角度：搜索引擎普遍偏愛響應式。

總結

• 響應式：一套模闆；由前端适應，不同分辨率模闆合並在一個頁面，下載一頁模闆就一個頁面。
• 自适應：多套模闆；由後端适應，每一個分辨率模闆一個頁面，分别下載不同分辨率模闆。