CSS中，單位分爲兩類
- 絕對單位：無論其他相關的設置怎麼變化，絕對單位指定的值是不會變化的；
- 相對單位：沒有固定的度量值，是由其他元素尺寸來決定的相對值。
注意：此處的相對指當前元素的字號（font-size）或者視口（viewport）尺寸。
絕對單位有：
| 單位 | 簡介 |
|---|---|
| px | 像素 (計算機屏幕上的一個點)，1px = 1/96in |
| pt | 磅 (Points) ，1 pt = 1/72 in |
| pc | 12 點活字（Picas），1pc = 12pt = 1/6in |
| in | 英寸（Inches），1in = 96px = 2.54cm |
| cm | 釐米（Centimeters），1cm = 96/2.54px |
| mm | 毫米（Millimeters），1mm = 1/10cm |
| q | Quarter-millimeters，1q = 1/4mm |
注：絕對單位通常使用在打印方面。
相對單位有：
| 單位 | 簡介 |
|---|---|
| % | 百分比，相對於父元素的寬度或者字體大小 |
| em | 相對於當前對象內文本字體的大小，1em = 當前字體的大小，2em = 2*當前字體的大小 |
| rem | （root em）,相對於html標籤的字體大小 |
| ex | 當前字體環境中x字母的高度，一個 ex 是一個字體的 x-height (x-height 通常是字體尺寸的一半。) |
| ch | 當前字體環境中0數字的高度 |
| vw | 1%視口（瀏覽器可視區域）的寬度 |
| vh | 1% 視口（瀏覽器可視區域）的高度 |
| vmin | 1% 視口（瀏覽器可視區域）寬度和高度中較小的尺寸 |
| vmax | 1% 視口（瀏覽器可視區域）寬度和高度中較大的尺寸 |
瀏覽器兼容性
| 單位 | chrome | IE | Firefox | Safari | opera |
|---|---|---|---|---|---|
em,ex,%,px,cm,mm,in,pt,pc |
1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch |
27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem |
4.0 | 9.0 | 1.0 | 7.0 | 20.0 |
vh，vw |
20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin |
20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
vmax |
26.0 | 不支持 | 19.0 | 不支持 | 20.0 |
重要單位詳解
1、%
相對於父元素相同屬性的大小，%可以說是屬性的值吧，但是可以看做長度單位來使用，因此列出。
-
%設置字體大小，則是相對於父元素的字體大小計算
大多數瀏覽器中<html>和<body>標籤中的默認字體尺寸是100%html{ font-size: 100%; } body {font-size: 100%;} /* 100% = 1em = 16px = 12pt */ -
%設置非字體尺寸（如寬和高），基於具有相同屬性的父元素的長度值
拓展：
確認父元素（relative、absolute、float、fixed、static）
1、static、relative、float元素，均符合HTML樹形結構
2、absolute是離它最近的定位元素（relative、absolute、fixed）元素或者body（沒找到定位元素）
3、fixed元素是視口
3、em
基於當前元素字體尺寸
html {
font-size: 14px;
}
div {
font-size: 1.2em;
line-height: 1.5em;
}
<body>
<div> font-size:16.8px;line-height:25.2px;
<div> font-size:20.16px;line-height:30.24px;
<div> font-size:24.192px;line-height:36.288px;</div>
</div>
</div>
</body>
4、rem
基於html字體尺寸
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
line-height: 1.5rem;
}
<body>
<div> font-size:16.8px;line-height:25.2px;
<div>font-size:16.8px;line-height:25.2px;
<div>font-size:16.8px;line-height:25.2px;</div>
</div>
</div>
</body>
注意：3&4中示例在chrome瀏覽器上顯示font-size:18px;line-height:27px;，但實際計算是根據16.8px來的，Firefox無此問題。
5、ex 和 ch
ex 和ch 單位，依賴於當前字體font-family 和字體大小 font-size。
ex指當前字體環境中小寫字母x的高度；ch指當前字體環境中數字0的寬度。
![在這裏插入圖片描述]()
7、vw 與 vh
如果項目中要使用視口（viewport）的寬度或者高度，而不是父元素的寬度或者高度，那麼這時候就需要vw和vh出場了。
1vw = 1%的視口寬度
1vh = 1%的視口高度
//假設視口的寬度爲750px，高度爲1400px,那麼：
1vw = 750px / 100 = 7.5px
1vh = 1400px / 100 = 14px
應用場景：
1、任意元素高度與屏幕高度一致：
// 以前做法
.test{ height: 100%}
html,body{height:100%}
// 現在做法：
.test{ height: 100vh}
2、子元素大小根據瀏覽器改變而不是父元素
3、響應字體大小
// 現在做法：
.test{ font-size: 100vh}
4、響應垂直居中
.test {
width:60vw;
height:60vh;
margin: 20vh auto;
}
5、等列寬
.colum-1 {
float: left;
width: 50vw;
}
.colum-2 {
float: left;
width: 30vw;
}
.colum-3 {
float: left;
width: 20vw;
}
注：IE10＋ 和現代瀏覽器都支持這兩個單位。
9、vmin 和 vmax
這兩個單位是針對vw和vh：
vmin是vw和vh中比較 小 的值;vmax是vw和vh中比較 大 的值。
注：
IE10+和現代瀏覽器都已經支持vmin- 除IE不支持
vmax，其他現代瀏覽器已經支持了
參考網站：
https://segmentfault.com/a/1190000004043937
https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html
http://fittextjs.com/