浅出vw/vh

发表于 | 阅读次数

什么是vw/vh?

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

  • vw = view width
  • vh = view height

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

单位 简介
vw 1vw = 视口宽度的1%
vh 1vh = 视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个

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

与百分比的区别

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

兼容性问题

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

应用

宽度自适应

1
2
3
4
5
6
7
8
9
.left {
    width: 30vw;
    float: left;
}

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

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

移动端适配

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

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

参考资料