css中單位em和rem

w3cschool中給出css中尺寸單位如下：

單位描述

%百分比

in英吋

cm厘公尺

mm公釐

em1em 等於當前的字型尺寸。

2em 等於當前字型尺寸的兩倍。

例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。

在 css 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。

ex乙個 ex 是乙個字型的 x-height。 (x-height 通常是字型尺寸的一半。)

pt磅 (1 pt 等於 1/72 英吋)

pc12 點活字 (1 pc 等於 12 點)

px畫素 (計算機螢幕上的乙個點)

看到對em描述最多就知道它很重要了。

em用來自適應使用者所使用的字型，1em相當於當前的字型尺寸（font-size屬性），2em相當於當前字型尺寸的2倍。

可見em用作特定字型的相對大小。

做移動端頁面的幾乎離不開這個單位。rem表示「root em」,字面上指的是根元素的em大小。在web文件的上下文中，根元素就是你的html元素。如果沒有重置，html預設font-size:16px。

我們可以方便的使用相對字型大小，而且還避免了使用巢狀的em結構的混亂。

在瀏覽器預設樣式一文中很多的預設樣式，單位都是用的em。

現在再拿其中一段預設樣式舉例。

h1              h2 h3 h4, p,blockquote, ul,fieldset, form,ol, dl, dir, menu h5 h6 h1, h2, h3, h4,h5, h6, b,strong 

通過上圖可以看出h1在預設情況下，font-size:32px;margin-bottom:21.44px；這個值是怎麼來的呢？下面解答一下。

相對單位em是相對於元素本身的字型大小的。在css中唯一例外的是font-size屬性，它的em和ex值指的是相對父元素的字型大小。

看一下chrome中h1的這一段預設樣式

h1的預設font-size:2em，相對于父元素，這裡父元素body的font-size:16px;(預設值)，所以計算一下得到h1的font-size:32px。

除了font-size之外其他屬性的em計算相對於元素自身字型大小。所以margin-bottom:0.67em計算值就是0.67*32px=21.44px了。

rem vs px

css中強大的em

css中單位em和rem

w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 css 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。...

css中單位em和rem

w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 css 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。...

rem 單位 和 em 單位

首先要知道 rem 和 em 是相對單位 我們通過 來看 rem 和 em的使用和區別 em 相對於父級 test 16px test test 顯示效果 我們可以看到，首先我們重置瀏覽器的預設顯示字型大小為16px 即便預設顯示大小也是16px body中的第乙個段落標籤的字型大小也就是16px ...