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