像素（pixel）
在前端開發(fā)視口的水平方向垂直方向都是由很多小格子組成状共，一個小格子就是一個像素
特點：不會隨著窗口大小的變化而變化峡继，像素是一個固定的單位（絕對單位）
百分比（%）
是前端開發(fā)中的一個動態(tài)單位舶吗，永遠是以當前元素的父元素作為參考進行計算
特點：
1.子元素的寬度是以父元素的寬度作為參考計算
2.子元素的高度是以父元素的高度作為參考計算
3.子元素的padding是以父元素的寬度作為參考計算
4.子元素的margin是以父元素的寬度作為參考計算
5.border寬度不能用百分比來設置
百分比是一個動態(tài)的單位，它會隨著父元素的寬高變化而變化（相對單位）
em
是一個動態(tài)單位，相對于元素字體大小的單位。例如：font-size: 12px腮出，那么1em就是12px
特點：
1.當前元素設置了字體大小馋劈，那么就相對于當前元素的字體大小
2.當前元素沒有設置字體大小，那么就相對于第一個設置字體大小的祖先元素的字體大小
3.當前元素和所有祖先元素都沒有設置字體大小，那么就相對于瀏覽器默認字體大小
是一個動態(tài)的單位，會隨著參考字體大小的變化而變化（相對單位）
rem（root em）
是一個動態(tài)單位，永遠相對于根元素的字體大小的單位
特點：
1.html元素設置了字體大小，那么就相對于html元素設置的字體大小
2.html元素沒有設置字體大小棵磷，那么就相對于瀏覽器默認字體大小
vw（viewport width）和vh（viewport height）
是一個動態(tài)單位仪媒，是一個相對于網(wǎng)頁視口的單位
特點：
系統(tǒng)會將視口劃分為100份，1vw就占用視口寬度的百分之一压昼，1vh就占用視口高度的百分之一
永遠都是以視口作為參考
是一個動態(tài)的單位，會隨著視口變化而變化（相對單位）
px vw rem之間的換算
1.我們假設pad的設計稿是以1920px為標準的傲绣。那么：
100vw = 1920px
1vw = 19.2px
我們想要： 1rem = 100px（這樣方便我們在寫代碼的時候換算）
那么:
100px = 100vw / 19.2 = 1rem
所以：
1rem = 5.208vw掠哥。
這時候禁舷，我們只要給html的根元素設置：
font-size: 5.208vw即可洁桌。
2.同理的，手機端我們假設設計稿是以750px為標準的，那么:
100vw = 750px
1vw = 7.5px
我們想要： 1rem = 100px
那么：
100px = 100vw / 7.5 = 1rem
那么：
1rem = 13.33vw
