em,rem和vh
最近研究自適應。總結一下CSS3的幾個單位。css
概述
remhtml
root emphasize，根元素<html>的font-sizeandroid
vw，vhcss3
vw:屏幕寬度相關，1vw是屏幕寬度的1%
vh:屏幕高度相關，1vh是屏幕高度的1%
vmin，vmax 分別表示二者中較小和較大的部分。web
emsegmentfault
基準點爲父節點的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及其以上等。app
rem是css3屬性，IE9及以上全部瀏覽器，安卓2.1以上版本，iOS4.0以及以上版本的safari（換句話說，IE6-8不兼容）
em是css2屬性字體
結論
比較得出，em的缺陷較多，不宜使用。
而rem的兼容性比vh/vw稍好一些。htm
下面給出一個rem使用的教程，綜合js和rem作web app的自適應，很是好用。
http://www.javashuo.com/article/p-rtaxqepy-z.html
- 1. em,rem和vh
- 2. vw，vh，px，%，em，rem
- 3. px、em、rem、vh、vw
- 4. 尺寸單位em,rem,vh,vw
- 5. CSS3中的px,em,rem,vh,vw辨析
- 6. px, em, rem, vw, vh, vmin, vmax的含義
- 7. CSS單位px、em、rem、vh、vw、vmin、vmax
- 8. px,em,rem,vh,vw,vmin,vmax的區別
- 9. px、em、rem區別 pt ppi dpi vw vh
- 10. CSS3中的px,em,rem,vh,vw
- 更多相關文章...
- • XLink 和 XPointer 語法 - XLink 和 XPointer 教程
- • Kotlin 類和對象 - Kotlin 教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。