---
# System prepended metadata

title: 搞懂 CSS 字體單位：px、em、rem 和 %
tags: [學習筆記]

---

# 搞懂 CSS 字體單位：px、em、rem 和 %



###### 網頁 ( 單位 )
> px：絕對單位，代表螢幕中每個「點」( pixel )。
em：相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
rem：相對單位，每個元素透過「倍數」乘以根元素的 px 值。
%：相對單位，每個子元素透過「百分比」乘以父元素的 px 值。
### 1. px
px 是絕對單位，因此只要設定多少 px，就會精確的呈現，對於一些講求精準位置的排版而言十分有用，如範例表示的，指定多大 px 字體就會多大。

![](https://hackmd.io/_uploads/B1x9OjBvh.png)


### 2. em
em 是『相對單位』， 它會受到外圍的文字大小所影響，而 1em 即是 1 的文字大小， 1.5em 也就是 1.5 倍的文字大小。

以下方的範例可以發現，如果外圍是以 15px，內層的文字第一層 1em 等同於 15px，隨後的依比例放大。
![](https://hackmd.io/_uploads/SyT2_orv3.png)
接下來改成使用 em 來做實驗，外層的文字大小直接從 1.4em 開始，可以看到內層的 1em 文字大小等同於外層 1.4em，隨後的逐漸放大。如果在加入一層在內部，文字就會以 1.4 * 1.4 的倍數再放大，這是 em 的相對比例單位的特性，是優點也是缺點，如果無法掌握就容易失控。![](https://hackmd.io/_uploads/ByfvFsrP2.png)

### 3. rem 
也是相對的文字尺寸，和 em 使用方法接近，不同的是他僅相對於 root 層級的文字大小(網頁中的 html)。

以這個範例來說，此網站的文字大小是 16px，rem的尺寸就是以 16px 為基準，故下方的 1rem 會與 16px 相同尺寸。所以無論外層是否有其他文字大小，皆不會影響 rem 的尺寸，唯一會影響 rem 比例的只有 html 的文字大小(可以打開 開發者工具 試試看喔)。
![](https://hackmd.io/_uploads/SJIaFiHv2.png)

### 4. % 
百分比是相對單位，和 em 大同小異，簡單來說 em 就是百分比除以一百，如果我們每一層 div 都使用 120%，就等同於 1.2em，最內層就會是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。
 ![TOC](https://hackmd.io/_uploads/HkUVqsBw3.png)








補充：
###### 印刷
> pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
in：英吋，在 96 dpi 的系統上 1 in = 96 px。
cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。
mm：公釐，在 96 dpi 的系統上 1 cm = 3.7795275593333 px。



---
參考網站：
[https://www.oxxostudio.tw/articles/201809/css-font-size.html](https://www.oxxostudio.tw/articles/201809/css-font-size.html)
[https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/](https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/)