CSS中那些你不知道的长度的单位VW和VH

通常我们要设置一个元素占满屏幕的时候我们可以设置这个元素的长和宽的数值为100%，CSS代码如下

.block {
    height: 100%;
    width: 100%;
}
复制代码

OK，大家觉得这样是不是就搞定了呢？

NO!怎么可能！会这么简单就能做到占满屏幕了吗？检查过你的html body的高宽了吗？是不是100%，OK就算这两个已经是100%了，那么你的容器对象呢？这样一来完整的CSS就要这样写了

html, body {
    height: 100%;
    width: 100%;
}

.container {
    height: 100%;
    width: 100%;
}

.container .block {
    height: 100%;
    width: 100%;
}
复制代码

好了，现在应该可以吧，NO！怎么可能！你现在是把这个容器的高宽都限定死了，如果页面的内容超过了限定的高度宽度呢？那么你的100%就不是屏幕的大小了。

还有一个问题，就是定位方式，如果你的其他元素使用了fixed absoluted relative 又或者使用了float:left float:right等方式定位，那么就破坏了原来的盒高度，那么就算是设定为100%也不一定能够占满整个屏幕了。

那有没有解决办法呢？当然有，可以使用CSS的calc来动态的计算长宽啊，不过这里有个性能的问题，calc在每次CSS样式调整的时候都要计算，性能上面会有很大的消耗。

那么可以使用JS来动态调整吗？当然可以了，也有很多现成的库。

但是！今天要介绍的东西是CSS原生自带的，而且还非常方便！那就是vw 和 vh二兄弟，先来看看他们怎么用

.block {
    width: 100vw;
    height: 100vh;
}
复制代码

好了，代码结束，现在已经实现了占满整个屏幕的实现了，我们不需要知道我们的容器大小，反正就是很霸道的设置成了占满整个屏幕。

那么来看看这两个单位吧vw = viewport width vh = wiewport height简单来说就是设备可视视图的宽度和长度，数值用的是百分比，也就是跟100%这样一样使用，这样一来就能很容易的设置我们需要的长度和宽度了。

那么出来一个问题，假如我设置的元素长度占满了整个屏幕，那么不是会无限循环的延长容器的高度了么？答案是当然不会了，使用vh设定的高度固定为设备的可视高度，跟原来的容器高度一点关系都没有，因此不会无限的延长容器的高度。

有了这两个单位后，我们就能很轻松的制作弹窗了，再也不用去复杂的计算长宽，一切都交给CSS就可以了

对了，虽然这两个单位是新添加的，但是微信小程序也支持的哦

希望这片文章对你有所帮助