「rem」是指根元素（root element，html）的字型大小，好開心的是，從遙遠的 ie6 到版本帝 chrome 他們都約好了，根元素預設的 font-size 都是 16px。這樣乙個新的單位相容性如何呢？
ie9+，firefox、chrome、safari、opera 的主流版本都支援了，我可以放肆的使用 rem 了。
em 的計算是基於父級元素的，在實際使用中給我們的計算帶來了很大的不便。所以 rem 的出現解救了我這樣不會算術的人，再也不用擔心父級元素的 font-size 了，因為它始終是基於根元素（html） 的。
比如預設的 html font-size=16px，那麼我想設定12px 的文字就是：12÷16=0.75（rem）
當然，你可以引入 css 預處理工具（sass、less 、stylus等）自動計算 rem 值，這裡就不一一舉例了。
但是像我這樣的懶人或者團隊開發中還沒有引入 css 預處理工具的該腫麼辦呢？只能搬個計算器啪啪啪了嗎？
別急，你還可以變通一下。我們改變一下 html 的預設 font-size=10px 不就好計算了嘛！like this：
html需要注意的是，為了相容不支援 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支援的瀏覽器可以優雅降級。其實不用太糾結是預設的 font-size:100%，還是設定為 font-size:62.5%，如果你引入了 css 預處理工具那麼自然可以使用預設值，如果由於其他原因使用 font-size:62.5% 也無可厚非，完全可以在 body 中重置回你需要的預設 font-size。body
p
乙個根據解析度轉換字型大小的demo
/* 480x800 */
@media screen and (max-width:480px)
} /* 1136x640 */
@media screen and (min-width:1136px) and (max-width:1280px)
} /* 1280x720 */
@media screen and (min-width:1280px) and (max-width:1334px)
} /* 1334x750 */
@media screen and (min-width:1334px) and (max-width:1920px)
} /* 1920x1080 */
@media screen and (min-width:1920px)
} /*
'1920x1080' => 30px,
'1334x750' => 21px,
'1280x720' => 20px,
'1136x640' => 18px,
'480x800' => 13px,
*/#content
rem用來設定字型大小
rem用來設定字型大小，也可以用於網格布局。rem中的r代表根元素，它的值就是根元素設定的字型大小。在大多數情況下，根元素就是html了。這個單位可以解決em設定字型時，由於繼承帶來的問題，具體如下 body div 假設html存在這樣的結構 test test test div div div ...
網頁字型大小標準
從ie 6到chrome，瀏覽器預設字型大小都是16px。現在瀏覽器都可以通過瀏覽器裡面的設定來修改字型大小，但當我們把字型大小設定為px時，修改不會成功，會導致使用者的體驗不夠好。所以我們可以使用css3裡面的rem 相對於html字型大小的百分比 對字型大小進行設定，這樣方便使用者自行修改字型大...
響應式網頁設計 rem em設定網頁字型大小自適應
rem 是指根元素 root element，html 的字型大小，好開心的是，從遙遠的 ie6 到版本帝 chrome 他們都約好了，根元素預設的 font size 都是 16px。這樣乙個新的單位相容性如何呢？ie9 firefox chrome safari opera 的主流版本都支援了，...