# CSS單位 rem em

###### tags: `單元筆記` `css` `觀念`

## 介紹

單位 rem 的 r 相當於 root ，也就是與跟元素有關係，看 ex01 可知 1rem 代表著與根元素所設定的單位一樣，而 2 則代表 2 倍大，可得知會與根元素的單位成等比。
單位 em 也類似 rem 值會依比例不同，當元素沒有設定 font-size 時會直接繼承瀏覽器的值，但是當該元素設定了 font-size 則以之為標準，該元素的子元素就會以此為基準，請看 ex02。

#### 補充

rem 的預設數值就是依照瀏覽器設置，例如 font-size 為 16 px

## 範例

* ex01 [codepen](https://codepen.io/allenw0815/pen/NWdOMve?editors=1100)


* ex02 [codepen](https://codepen.io/allenw0815/pen/NWdOMve?editors=1100) 兩個父元素 box 都是 10em 差別在於一個直接繼承根，一個自行設定 font-size


#### 應用?

使用 rem 可透過改變瀏覽器的設定去隨之更動值，但是設定 px 的話則無法。

## 心得

目前尚未習慣用此單為，但應該為比較好的選擇。

## 參考
[YT 解說影片](https://www.youtube.com/watch?v=oIDBO8kgdpA)
[CSS 小技巧分享：em 單位的強大用途](https://medium.com/%E9%BA%A5%E5%85%8B%E7%9A%84%E5%8D%8A%E8%B7%AF%E5%87%BA%E5%AE%B6%E7%AD%86%E8%A8%98/css-%E5%B0%8F%E6%8A%80%E5%B7%A7%E5%88%86%E4%BA%AB-em-%E5%96%AE%E4%BD%8D%E7%9A%84%E5%BC%B7%E5%A4%A7%E7%94%A8%E9%80%94-457dc30a83b4)