1、自適應
自適應布局是網頁內容根據設備的不同而進行適應；通過檢測視口分辨率，來判斷當前訪問的設備是PC端、平板還是手機，從而請求服務層，返回不同的頁面；需要根據不同使用場景開發多套界面。
2、響應式
響應式布局是網頁的布局針對屏幕大小的尺寸而進行響應；通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現不同的布局和內容；只需要開發壹套界面即可適用於所有尺寸及終端。
3、區別
比較直觀的不同是：自適應：需要開發多套界面；響應式開發壹套界面
自適應設計通過檢測視口分辨率，來判斷當前訪問的設備是：PC端、平板、手機，從而請求服務層，返回不同的頁面；響應式設計通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現不同的布局和內容。
自適應對頁面做的屏幕適配是在壹定範圍：比如PC端（>1024）壹套適配,平板（768-1024）壹套適配，手機端（<768）壹套適配;響應式壹套頁面全部適配。（可以想象：響應式設計要考慮的內容要比自適應設計復雜的多）
4、學習渠道
不管哪種設計方式，都要學習基本的WEB布局，比如流式布局、定位布局、浮動布局、flex布局、grid布局等，另外還要學習@media媒體查詢，視口等相關知識，這個可以從W3C官網查看資料。另外也可以學習前端框架，許多框架都支持響應式布局，比如bootstrap等。