rem 與 em 總結

來自專欄 前端小學僧

這篇文章主要總結一下 rem 和 em 這兩個 CSS 單位，因為前端現在很多都是面向移動端的，需要彈性布局之類的，所以簡單總結一下。

rem

rem 有兩種情況：

• 作為根元素的單位時，相對於初始字體的大小，即 16px。

html{ font-size: 3rem}

這時候 rem 作為根元素 html 的單位，所以 1rem = 16px。

所以相等於：

html{ font-size: 48px}

• 作為非根元素單位時，相對於根元素的字體大小。

html{ font-size: 48px}p{ font-size: 2rem}

這時 rem 作為非根元素的單位，1rem = 48px.

所以相等於:

html{ font-size: 48px}p{ font-size: 96px}

em

em 也有兩種情況：

• 作為 font-size 的單位時，相對於父元素的字體大小

<div class="parent"> <div class="child"></div></div>.parent{ font-size: 16px}.child{ font-size: 2em}

上面這種情況，1em = 16px,所以子元素的 font-size 等於 32px。

• 作為 非font-size 的單位時，相對於自身的字體大小

<div class="parent"> <div class="child"></div></div>.parent{ font-size: 16px}.child{ font-size: 32px； width: 2em}

這種情況，1em = 32px，所以 子元素的 width 等於 64px。

除了這兩種單位之外，還有 vw 和 vh 。

簡單了解一下：

vw 等於視口寬度的 1/100；

vh 等於視口高度的 1/100；

當然，這只是簡單的了解，我們還需要更多的練習與應用。

推薦閱讀：