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 下也无效的)

偶然发现可以通过 给图片设置 <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> 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视频教程

Atas ialah kandungan terperinci css3中新单位（vw ）的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!