vw 單位 android 4.4 下的一個小bug

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