点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
通过上一篇的巴拉巴拉一堆讲解，我们对这几个单位有了一个认识。比方，兼容情况，干嘛使用的......。
这篇我们专门来谈一下它的用场景。前面三个场景都是现有方法可替代的，最后一个是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单位才能搞】。
相对视窗满屏展现，又不脱离文档流，关键是纯CSS实现，如下效果：
关键代码是这样的：
.item{
width:100vw;
height:100vh;
}
最后小节：
关于V单位的用场景就说到这里，如发现还有其它使用途，可以与之分享。
