最近研究自適應。總結一下CSS3的幾個單位。
概述
-
rem
root emphasize，根元素<html>的font-size
-
vw，vh
vw:螢幕寬度相關，1vw是螢幕寬度的1%
vh:螢幕高度相關，1vh是螢幕高度的1%
vmin，vmax 分別表示兩者中較小和較大的部分。
-
em
基準點為父節點的font-size
如果自身定義了font-size按自身來計算（瀏覽器預設字型是16px），整個頁面內1em不是一個固定的值。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。(引自CSS2.0手冊) 意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。
為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
-
三者相容性
vh,vw:ie9及其以上、safari5及其以上、android4.4及其以上等。
rem是css3屬性，IE9及以上所有瀏覽器，安卓2.1以上版本，iOS4.0以及以上版本的safari（換句話說，IE6-8不相容）
em是css2屬性
結論
比較得出，em的缺陷較多，不宜使用。
而rem的相容性比vh/vw稍好一些。
下面給出一個rem使用的教程，綜合js和rem做web app的自適應，非常好用。
https://segmentfault.com/a/1190000003931773