100vh，干货看这篇!承接上篇这里谈V(VW/VH/VM)单位的使用场景

可以点击右上角的红色按钮关注“小静”，每天学习知识，理解一个问题！

通过上一篇巴拉巴拉的一堆说明，我们对这几支部队有了一种认识。

比如，兼容情况，干嘛用的......。

这篇我们专门来谈一下它的使用场景。前面三个场景都是现有方法可替代的，最后一个是V单位特有的（我觉得）。

场景一：分配空间

左右边框区域分别占用视窗的20vw和80vw。然而，由于块级元素它本身就有满屏特性，同时百分比也能取代它的这个作用。所以这种场景下使用v单位会显得有点多余。即不属于V单位独特的应用场景。

场景二：限制尺寸

有一种场景，大家估计都碰到过。当你要在屏幕上展示一张图片时， 各种尺寸的图片都希望展示完整的图片信息。这个时候我们会通过JS根据屏幕宽度+图片宽高进行各种计算来达到我们想要的目的。总结来说就是如何让一张图片在一屏内显示。

使用v单位纯CSS代码也能实现。类似于下面代码这样搞

（100vw代表100%的视窗宽度）

（100vh代表100%的视窗高度）

image{

max-width:90vw;

max-height:90vh;

}

因为v单位是相对于视窗大小来处理的。实际展示如下：

场景三：满屏平铺

V单位竟然是相对视窗来显示，那么很容易想到可以用来做满屏平铺，比如我们要搞一个背景满屏阴影遮罩的效果。

.parent{

height:100vh;

background:rgba(0,0,0,0.5);

}

上面由于块级元素是满屏特性，无需设置宽度。

这个效果也是有替代方案的，如高度100%，再如稍微处理后的fixed定位的元素。

【有没有发现，上面三个应用场景，其实用CSS现有的方法都是可以实现的。难道V单位都是多此一举吗？我再想一种场景，现有方法很难实现的。也许只有v单位才能搞】。

四、目前发现只有v单位能搞的场景

相对视窗满屏展示，又不脱离文档流，关键是纯CSS实现，如下效果：

关键代码是这样的：

.item{

width:100vw;

height:100vh;

}

最后小节：

关于V单位的使用场景就说到这里，如发现还有其它用途，可以与之分享。