---
tags: Bootstrap5
---

# 知識點：rem 單位

### rem em px 差異性

* 如果預設單位 基本為文字大小 16px
* 定義 2rem 與 2em 就會乘上基本文字的兩倍 變成32px


> ### 那我們在設定文字中包上標籤來定義差距

 <div class="em2">外層文字
        <strong class="em2">內層文字大小</strong>
    </div>
    <hr>
    <div class="rem2">外層文字
        <strong class="rem2">內層文字大小</strong>
    </div>

#### ==em== 的特性 會將外層繼承 乘上 = 32px * 2 = 64px

#### ==rem== 的特性 不會將未層屬性 乘上 還是只會顯示 32px

### ==誰會受最外層的影響==

> 若定義一個全域最外層 html 或 root，px為 20

   :root {
            font-size: 20px;
        }

#### ==em== 的影響，em會等於 40px ，內層會受影響 在乘上 2 等於 80px

#### ==rem== 的影響 rem會等於 40px ，內層不受影響還是 40px

### ==若body誰會受影響==

> 在body定義一個 font-size: 15px;

   body {
            font-size: 15px;
        }

#### ==em== 因為繼層的原理 所以外層為 30px 內層為 60px

#### ==rem== 因為只會受最外層影響 所以外層為 32px 內層也為 32px