| 單位 | 說明 | 特點 |
|---|---|---|
| px | （pixel）像素 | 可固定布局或元素大小脖律，缺點無彈性 |
| em | 參考物是父元素的font-size，具有繼承的特點 | |
| rem | 相對于根元素html | |
| % | 1腕侄、普通定位元素：父元素 小泉；absolute;的元素是相對于已定位的父元素 芦疏； fixed;的元素是相對于ViewPort（可視窗口） | |
| vw | （view width）視窗寬度的百分比 | 1vw 代表視窗的寬度為 1% |
| vh | (view height)視窗高度的百分比 | 假如高度是1200px的話。那1vh就是12px |
| vmin | 當前 vw 和 vh 中較小的一個值 | |
| vmax | 當前 vw 和 vh 中較大的一個值 |
vw微姊、vh 與 % 百分比的區(qū)別
（1）% 是相對于父元素的大小設定的比率酸茴，vw、vh 是視窗大小決定的兢交。
（2）vw薪捍、**vh **優(yōu)勢在于能夠直接獲取高度，而用 **% **在沒有設置 **body **高度的情況下配喳，是無法正確獲得可視區(qū)域的高度的酪穿，所以這是挺不錯的優(yōu)勢。
#mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
vmin晴裹、vmax 用處
做移動頁面開發(fā)時被济，如果使用 vw、wh設置字體大薪拧（比如 5vw）只磷，在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。
由于 vmin和 vmax是當前較小的 vw和 vh和當前較大的 vw和 vh泌绣。這里就可以用到 vmin和 vmax钮追。使得文字大小在橫豎屏下保持一致。
瀏覽器兼容性
vw單位兼容性比rem稍差阿迈，ios8畏陕、安卓4.4及以上才完全支持。這也是為什么之前rem布局一直更流行的原因仿滔。
（1）桌面 PC
Chrome：自 26版起就完美支持（2013年2月）
Firefox：自 19版起就完美支持（2013年1月）
Safari：自6.1版起就完美支持（2013年10月）
Opera：自15版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到現(xiàn)在還只是部分支持（不支持 vmax惠毁，同時 vm代替 vmin）
（2）移動設備Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8版起就完美支持（2014年9月）
px
px就是pixel的縮寫，意為像素崎页。px就是設備或者圖片最小的一個點鞠绰，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點飒焦，垂直方向是768個像素點蜈膨。
是我們網(wǎng)頁設計常用的單位，也是基本單位牺荠。通過px可以設置固定的布局或者元素大小翁巍，缺點是沒有彈性。
2休雌、em
參考物是父元素的font-size灶壶，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px）杈曲，整個頁面內(nèi)1em不是一個固定的值驰凛。
特點是1. em的值并不是固定的胸懈； 2. em會繼承父級元素的字體大小。
3恰响、rem
rem是相對于根元素html趣钱，這樣就意味著，我們只需要在根元素確定一個參考值胚宦，可以設計HTML為大小為10px首有，到時設置1.2rem就是12px.以此類推。
優(yōu)點是枢劝，只需要設置根目錄的大小就可以把整個頁面的成比例的調(diào)好绞灼。
4、%
一般來說就是相對于父元素的呈野，
1低矮、對于普通定位元素就是我們理解的父元素 2、對于position: absolute;的元素是相對于已定位的父元素 3被冒、對于position: fixed;的元素是相對于ViewPort（可視窗口）军掂，
5、vw
css3新單位昨悼，view width的簡寫蝗锥，是指可視窗口的寬度。假如寬度是1200px的話率触。那10vw就是120px
舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px终议。
6、vh
css3新單位葱蝗，view height的簡寫穴张，是指可視窗口的高度。假如高度是1200px的話两曼。那10vh就是120px
舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px皂甘。
7、vm
css3新單位悼凑，相對于視口的寬度或高度中較小的那個偿枕。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度900px，寬度1200px户辫，取最小的瀏覽器高度渐夸，1 vm = 900px/100 = 9 px。
兼容性太差 渔欢，現(xiàn)在基本上沒人用墓塌，我試了一下Chrome就用不了。
參考：https://blog.csdn.net/weixin_42192534/article/details/80289782
https://blog.csdn.net/ZNYSYS520/article/details/76053961
