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.自適應布局如果屏幕太小會發生內容過於擁擠;
響應式布局正是為了解決這個問題而衍生出的概念,它可以自動識別屏幕寬度並做出相應調整的網頁設計。
總之,響應式布局還是要比自適應布局要好一點,但是自適應布局更加貼切實際,因為你只需要考慮幾種狀態就可以了而不是像響應式布局需要考慮非常多狀態。所以的說無論哪種設計都有它們各自的特點,我們要根據項目的需求來選擇適合的布局方式。