CSS 中常見尺寸
| 單位 | 描述 | |
|---|---|---|
| % | 百分比 | |
| in | 英寸 | |
| cm | 釐米 | |
| mm | 毫米 | |
| ex | 一個 ex 是一個字型的 x-height。 (x-height 通常是字型尺寸的一半。) | |
| pt | 磅 (1 pt 等於 1/72 英寸) | |
| pc | 12 點活字 (1 pc 等於 12 點) | |
px |
畫素 (計算機螢幕上的一個點) | |
em |
1em 等於當前的字型尺寸。 2em 等於當前字型尺寸的兩倍。 例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。 在 CSS 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。 |
|
rem |
rem表示“Root EM”,字面上指的是根元素的em大小。 在Web文件的上下文中，根元素就是你的html元素。 如果沒有重置，html預設font-size:16px。 |
em 和 rem 比較
| 單位 | 特點 |
|---|---|
em |
相對單位em是相對於元素本身的字型大小的。 在css中唯一例外的是 font-size屬性，它的em和ex值指的是相對父元素的字型大小。 |
rem |
集相對大小和絕對大小的優點於一身， 通過它既可以做到只修改根元素就成比例地調整所有字型大小， 又可以避免（使用em）字型大小逐層複合的連鎖反應 |
em 缺點
- em 的值並不是固定的；
- em 會繼承父級元素的字型大小。
舉例
body{
font-size: 10px;
}
h2{
display: block;
width: 80%;
font-size: 1.5em;
margin: 0.5em;
}h2的字型大小繼承了body字型， 10px * 1.5 = 15pxh2的margin屬性則是相對於本元素字型大小： 15px * 0.5 = 7.5px
如下圖所示
rem 使用小技巧
body選擇器中宣告Font-size=62.5%;- 將你的原來的
px數值除以10，然後換上rem作為單位；