1vw=1%，那么如果它们是100%可互换的，为什么它们都存在？我觉得%取决于包装标签的大小，但vh总是取决于窗口大小，无论包装标签的尺寸如何。谢谢，
它们不一定是可互换的。
行为将主要取决于元素在DOM中的位置，因为这将决定元素的包含块是什么。如果元素的宽度为100%，则其宽度为包含块的宽度的100%。如果元素的宽度为100vw，则其宽度为视口宽度的100%（视口可能不是元素的包含元素，但视口百分比单位始终相对于视口）。
严格基于百分比的宽度总是相对于另一个元素的宽度，但当使用视口百分比长度时，元素的宽度实际上可以相对于视口的高度。例如，如果元素的宽度为100vh，则其宽度将为视口高度的100%。当使用严格基于百分比的宽度时，这是不可能的。
视口百分比长度总是相对于其初始包含块，即视口：
5.1.2.视口百分比长度："vw"、"vh"、"vmin"、"vm ax"单位
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生更改时，它们将相应地进行缩放。
而基于百分比的单元将相对于它们的父元素（即，它们的包含块），后者可能恰好是body/html元素，在这种情况下，它们将类似于视口百分比长度。
4.3.百分比："
<percentage>"类型百分比值总是相对于另一个值，例如长度。每个允许百分比的属性还定义了百分比所指的值。该值可以是同一元素的另一个属性、祖先元素的属性或格式化上下文的值（例如，包含块的宽度）。如果为根元素的某个属性设置了一个百分比值，并且该百分比被定义为引用某个属性的继承值，则结果值是该属性的初始值的百分比倍。