CSS 单位 - vh/vw 和 % 有什么区别？

Question

我刚刚了解了一个新的、不常见的 CSS 单元。 vh 和vw 分别测量视口(viewport)的高度和宽度的百分比。

我从 Stack Overflow 查看了这个问题，但它使单位看起来更加相似。

How does vw and vh unit works

答案具体说

vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc.

这似乎与更常见的 % 单元完全相同。

在开发人员工具中，我尝试将值从 vw/vh 更改为 %，反之亦然，结果相同。

两者有区别吗？如果不是，为什么要将这些新单元引入 CSS3？

Answer 1

100% 可以是任何高度的 100%。例如，如果我有一个 1000px 高的父级 div 和 100% 的子级 div高度，那么该子 div 理论上可以比视口(viewport)的高度高得多，或者比视口(viewport)的高度小得多，即使 div 是设置为 100% 高度。

如果我改为将子 div 设置为 100vh，那么它将仅填充高度的 100%视口(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>