我刚刚了解了一个新的、不同寻常的CSS单元.vh和vw分别测量视口的高度和宽度百分比.
我在Stack Overflow中查看了这个问题，但它使单元看起来更相似.
答案明确地说
vw和vh是窗宽和窗高的百分比，
这看起来和%台完全一样，后者更常见.
在开发人员工具中，我try 将值从vw/vh更改为%，反之亦然，得到了相同的结果.
两者之间有区别吗？如果没有，为什么这些新单元被引入CSS3个？
我刚刚了解了一个新的、不同寻常的CSS单元.vh和vw分别测量视口的高度和宽度百分比.
我在Stack Overflow中查看了这个问题，但它使单元看起来更相似.
答案明确地说
vw和vh是窗宽和窗高的百分比，
这看起来和%台完全一样，后者更常见.
在开发人员工具中，我try 将值从vw/vh更改为%，反之亦然，得到了相同的结果.
两者之间有区别吗？如果没有，为什么这些新单元被引入CSS3个？
100%可以是任何物体高度的100%.例如，如果我有一个1000px高的父对象div和一个100%高的子对象div，那么从理论上讲，子对象div可能比视口的高度高很多，或者比视口的高度even though that 102 is set at 100 height小很多.
如果我将子div设置为100vh，那么它将是only fill up 102 of the height of the viewport，而不一定是父div.
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>