響應式佈局與自適應佈局的區別

rem

·rem單位：CSS3 新增的一個相對單位；相對於根元素html的font-size的值進行動態計算獲得的，如font-size：14px，1rem = 14px。

例：根據當前屏幕寬度和設計稿寬度計算html-fontsize的值

       設計稿寬度：640px，fontsize：14px，屏幕寬度是375px，則font-size = 375/640*14 即：375/600 = fontsize/14

若是html的fontsize的值改變了，以前設定的全部rem單位的值自動會跟着放大或者縮小；目前移動端響應式佈局，推薦使用 rem。

注意：rem須要配合媒體查詢纔可實現響應式佈局

em

·em單位:相對於父元素字體大小，默認狀況下，1em = 16px

通常適用於響應式，但不推薦使用，計算比較繁瑣。

vw/vh

vw單位：viewpoint width 視窗寬度的百分比（1vw 表明視窗的寬度爲 1%）

vh單位：viewpoint height 視窗高度的百分比（1vh 表明視窗的高度爲 1%）

通常適用於百分比佈局。

響應式佈局和自適應佈局區別

1.自適應佈局經過檢測視口分辨率，來判斷當前訪問的設備是：pc端、平板、手機，從而請求服務層，返回不一樣的頁面；

   響應式佈局經過檢測視口分辨率，針對不一樣客戶端，在客戶端作代碼處理，來展示不一樣的佈局和內容。

2.自適應佈局須要開發多套界面；

　響應式佈局只須要開發一套界面就能夠了。

3.自適應佈局對頁面作的屏幕適配是在必定範圍：好比pc端通常要大於1024像素，手機端要小於768像素；

　響應式佈局是一套頁面所有適應。

4.自適應佈局若是屏幕過小會發生內容過於擁擠；

　響應式佈局正是爲了解決這個問題而衍生出的概念，它能夠自動識別屏幕寬度並作出相應調整的網頁設計。

總之，響應式佈局仍是要比自適應佈局要好一點，可是自適應佈局更加貼切實際，由於你只須要考慮幾種狀態就能夠了而不是像響應式佈局須要考慮很是多狀態。因此的說不管哪一種設計都有它們各自的特色，咱們要根據項目的需求來選擇適合的佈局方式。