什么是vw/vh?

CSS3引入的视口单位(了解视口可以参考web移动端适配中的视口介绍)

• vw = view width
• vh = view height

简而言之1vw = 视口宽度的1%，1vh = 视口高度的1%。

是不是很像百分比，不过还是略有区别的

与百分比的区别

百分比依赖于父级元素，vw/vh依赖于视口

兼容性问题

(感觉移动端的话，完全不用担心哈，O(∩_∩)O哈哈~)

应用

宽度自适应

.left {
    width: 30vw;
    float: left;
}

.right {
    width: 70vm;
    float: right;
}

硬要说和百分比有什么优势的话，那就是不用管父级的百分比样式了吧。

移动端适配

• 容器适配，可以使用vw
• 文本的适配，可以使用vw
• 大于1px的边框、圆角、阴影都可以使用vw
• 内距和外距，可以使用vw

详情参考：再聊移动端页面的适配

参考资料

• vh,vw单位你知道多少？
• 视区相关单位vw, vh..简介以及可实际应用场景
• 再聊移动端页面的适配