css中單位em和rem

一、介紹

1、em

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

單位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等於當前的字體尺寸。 2em 等於當前字體尺寸的兩倍。 例如，如果某元素以 12pt 顯示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的單位，因為它可以自動適應用戶所使用的字體。
ex	一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。)
pt	磅 (1 pt 等於 1/72 英寸)
pc	12 點活字 (1 pc 等於 12 點)
px	像素 (計算機屏幕上的一個點)

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

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

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

2、rem

做移動端頁面的幾乎離不開這個單位。REM表示“Root EM”,字面上指的是根元素的em大小。在Web文檔的上下文中，根元素就是你的html元素。如果沒有重置，html默認font-size:16px。

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

二、舉例

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

現在再拿其中一段默認樣式舉例。

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong          { font-weight: bolder }

可以看出標題系列除了font-weight加粗外還有font-size設置和margin預留。現在就來看看h1的font-size和margin預留。

 

通過上圖可以看出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

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4742581.html有問題歡迎與我討論，共同進步。