css3中新單位（vw ）的詳解

CSS3 vw 單位

Paste_Image.png

100vw = 100% 視窗寬度
100vh = 100% 視窗高度

這樣實現自適應正方形(固定長寬比例的容器)就會相當簡單!

[lang=stylus].box  width 10vw  height 10vw

既然是新單位, 必然就會有 相容性問題.

[lang=jade].img-box  img(src="img/a.png")

[lang=stylus].img-box  width 10vw  height 10vw  img    width 100%    height 100%    object-fit cover

Paste_Image.png

代碼正常效果應該是上左圖, 實現一個正方形盒子裡放一張圖片, 自適應置中
然而安卓4.4手機裡, 圖片會失真, 高度不是以 .img-box 計算的, 如上右圖 (object-fit cover 在 安卓 4.4 下也無效的)

偶然發現可以通過 給圖片設定 position absolute 解決高度錯誤問題 (object-fit cover 無效)

[lang=stylus].img-box  width 10vw  height 10vw  position relative  img    position absolute    left 0    top 0    width 100%    height 100%    object-fit cover

css3 新的 flex vw vh 讓布局靈活方便很多
正方形不再使用 padding-bottom 100% 讓人看不容易不懂的方法了

最後希望大家多用 chrome 早日脫離 IE

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程