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
作為單位;