> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/values/unit/relative/rem.md).
# rem
[CSS](/web/css.md) ⟩ [values](/web/css/values.md) ⟩ [relative](/web/css/values/unit/relative.md) ⟩ [units](/web/css/values/unit.md) ⟩ `rem`
{% hint style="info" %} **`rem`** = `` 的 `font-size`
{% endhint %}
:star: **`rem`** 是 “root em” 的縮寫，`r` 指 `:root` (``)。
{% tabs %}
{% tab title="💾 程式" %}
/* :root = html */
:root { font-size: 16px; } /* ⭐️ 定義 rem = 16px */
h1 { font-size: 2rem; } /* 2rem = 32px */
p { font-size: 1rem; } /* 1rem = 16px */
{% endtab %}
{% tab title="👥 相關" %}
* 用 [em](/web/css/values/unit/relative/em.md) 會導致累積效應，用 **`rem`** 可避免這種效應。
{% endtab %}
{% tab title="📘 手冊" %}
* MDN ⟩ [CSS values and units](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
{% endtab %}
{% tab title="📗 參考" %}
* [一次搞懂 CSS 字體單位：px、em、rem 和 %](https://www.oxxostudio.tw/articles/201809/css-font-size.html)
{% endtab %}
{% endtabs %}