1vw = 1％，所以如果它们100％可互换，为什么它们都存在？我觉得％取决于包装标签的大小，但无论包装标签的大小如何，vh总是依赖于窗口大小。 谢谢，
答案 0 :(得分：9)
它们不一定是可以互换的。
行为将主要取决于元素在DOM中的位置，因为这将决定元素的包含块是什么。如果元素的宽度为100%，则其包含块的宽度为100% 宽度。如果元素的宽度为100vw，则视口的宽度为100% 宽度（视口可能不是元素＆＃39; s包含元素，但视口百分比单位将始终相对于视口。）
基于百分比的严格宽度始终相对于另一个元素的宽度，但在使用视口百分比长度时，元素的宽度实际上可以相对于视口的高度。例如，如果元素的宽度为100vh，则视口的宽度为100% 高度。使用严格基于百分比的宽度时，这是不可能的。
视口百分比长度始终相对于initial containing block，即视口：
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
视口百分比长度相对于initial containing block的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
而基于百分比的单位将相对于其父元素（即其包含的块），这可能恰好是body / html元素，在这种情况下它们将是相似的视口长度。
4.3. Percentages: the ‘
<percentage>’ type百分比值始终相对于另一个值，例如长度。允许百分比的每个属性还定义百分比所引用的值。该值可以是同一元素的另一个属性的值，祖先元素的属性或格式化上下文的值（例如，包含块的宽度）。当为根元素的属性设置百分比值并且百分比被定义为引用某个属性的继承值时，结果值是该属性的初始值的百分比乘以。