rem：是一個相對單位，相對根元素字型大小的單位，再直白點就是相對於html元素字型大小的單位。

優點：這樣在計運算元元素有關的尺寸時，只要根據html元素字型大小計算就好。不再像使用em時，得來回的找父元素字型大小頻繁的計算，根本就離不開計算器。

首先看下圖：html的字型大小設定為font-size:62.5%原因：瀏覽器預設字型大小是16px，rem與px關係為：1rem = 10px，10/16=0.625=62.5%，為了子元素相關尺寸計算方便，這樣寫最合適不過了。只要將設計稿中量到的px尺寸除以10就得到了相應的rem尺寸，方便極了。當然，直接將html元素設定為10px，也是可以的。

但是為什麼一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因為有些瀏覽器預設的不是16px，或者使用者修改了瀏覽器預設的字型大小（因瀏覽器解析度大小，視力，習慣等因素）。如果我們將其設定為10px，一定會影響在這些瀏覽器上的效果，所以最好用絕大多數使用者預設的16作為基數 * 62.5% 得到我們需要的10px。

找了個參考圖，方便參考。如下：

然鵝，這裡有個坑，在大部分現代瀏覽器都沒有問題，但是，谷歌font-size:62.5%剛好是10畫素，而谷歌是不支援小於12畫素的字型的，所以，谷歌無形當中將所有的rem全部變大了。這下麻煩了，所有的地方都錯位了。chrome在字型小於12px時都當12px 處理，也就是設定62.5%相當於設定成了75.0%。但是在除的時候又是除的10得到rem值，那麼當然錯位。

針對這個現象，可以嘗試設定html字型為625%，即100px，body 修正為16px，這樣 0.1rem 就是 10px，而body的字型仍然是預設大小，不影響未設定大小的元素的預設字型的大小。