CSS中的rem和em有什麼差別？

CSS 中rem 和em 的區別

CSS 中可以使用多種單位來定義字體大小，其中常見的是rem 和em 。雖然這兩個單位都用於設定相對字體大小，但它們在一個關鍵方面有所不同：它們的相對參考點。

理解 em

em 單位是相對於其父元素的字體大小。這表示如果父元素的字體大小為 14px，則字體大小為 1.4em 的子元素的字體大小將為 1.4 * 14px = 19.6px。

理解 rem

相反，rem 單位是相對於基本字體大小的。此基本字體大小通常在 檔案中設定。元素或透過 CSS 變數。如果基本字體大小設定為 16px，則所有 rem 值都會相對於該大小進行計算。因此，我們範例中字體大小為 1.4rem 的子元素的字體大小將為 1.4 * 16px = 22.4px。

對巢狀元素的影響

當處理改變字體大小的巢狀容器時，這種差異變得很重要。 ems 中定義的子元素將從其父元素繼承更改後的字體大小，而 rems 中定義的子元素將保持其與基本字體大小的相對大小。

範例

在提供的程式碼片段中：

<code class="html"><div>Hello <p>World</p></div></code>

<code class="css">div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}</code>

以上是CSS中的rem和em有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！