在前端開發中,自適應和響應式的區別有哪些?可以通過哪些渠道來學習?
時間:2023-09-11 來源:華清遠見
1、自適應
自適應布局是網頁內容根據設備的不同而進行適應;通過檢測視口分辨率,來判斷當前訪問的設備是PC端、平板還是手機,從而請求服務層,返回不同的頁面;需要根據不同使用場景開發多套界面。
2、響應式
響應式布局是網頁的布局針對屏幕大小的尺寸而進行響應;通過檢測視口分辨率,針對不同客戶端在客戶端做代碼處理,來展現不同的布局和內容;只需要開發一套界面即可適用于所有尺寸及終端。
3、區別
比較直觀的不同是:自適應:需要開發多套界面;響應式開發一套界面
自適應設計通過檢測視口分辨率,來判斷當前訪問的設備是:PC端、平板、手機,從而請求服務層,返回不同的頁面;響應式設計通過檢測視口分辨率,針對不同客戶端在客戶端做代碼處理,來展現不同的布局和內容。
自適應對頁面做的屏幕適配是在一定范圍:比如PC端(>1024)一套適配,平板(768-1024)一套適配,手機端(<768)一套適配;響應式一套頁面全部適配。(可以想象:響應式設計要考慮的內容要比自適應設計復雜的多)
4、學習渠道
不管哪種設計方式,都要學習基本的WEB布局,比如流式布局、定位布局、浮動布局、flex布局、grid布局等,另外還要學習@media媒體查詢,視口等相關知識,這個可以從W3C官網查看資料。另外也可以學習前端框架,許多框架都支持響應式布局,比如bootstrap等。
當然,如果要想快速高效的學習響應式設計以及H5全棧開發,報一個班是最好的方式,因為培訓班的教學大綱已經提煉了實際開發最常用的知識點,具有豐富開發經驗的講師按重要程度優先級安排授課內容,非常具有針對性,能起到事半功倍的效果。

