我刚刚了解了一个新的不常见的CSS单元。vh和vw分别测量视口的高度和宽度的百分比。
我从Stack Overflow看这个问题，但它使单元看起来更加相似。
vw和vh单元是如何工作的
答案特别说
vw和vh分别是窗口宽度和高度的一个百分比:100vw是宽度的100%，80vw是80%等。
这似乎与%单元完全相同，后者更为常见。
在Developer Tools中，我尝试将vw/vh的值更改为%，反之亦然，得到了相同的结果。
这两者有区别吗？如果没有，为什么要将这些新单元引入CSS3？
100%可以是任何高度的100%。例如，如果父div高度为1000px而子div高度为100%，那么该子div理论上可能比视区的高度高得多，或者比视区的高度小得多，即使该div的高度设置为100%。
如果我将子div设置为100VH，那么它只会填充视口高度的100%，而不一定填充父div。
null
body,
html {
height: 100%;
}
.parent {
background: lightblue;
float: left;
height: 200px;
padding: 10px;
width: 50px;
}
.child {
background: pink;
height: 100%;
width: 100%;
}
.viewport-height {
background: gray;
float: right;
height: 100vh;
width: 50px;
}<div class="parent">
<div class="child">
100% height
(parent is 200px)
</div>
</div>
<div class="viewport-height">
100vh height
</div>