1vw = 1%, so if they are 100% interchangeable why they both exist? I feel % depends on the size of wrapper tag but vh is always dependent on window size no matter of size of wrapper tag. Thanks,
1vw = 1％，所以如果它们100％可互换，为什么它们都存在？我觉得％取决于包装器标签的大小，但无论包装器标签的大小如何，vh总是依赖于窗口大小。谢谢，
1 个解决方案
#1
9
They aren't necessarily interchangeable.
它们不一定是可以互换的。
The behavior will mainly depend on the element's position in the DOM, since this will determine what the element's containing block is. If an element has a width of 100%, it will have a width of 100% of the containing block's width. If the element has a width of 100vw, it will have a width of 100% of the viewport's width (the viewport may not be the element's containing element, but viewport-percentage units will always be relative to the viewport).
行为将主要取决于元素在DOM中的位置，因为这将确定元素的包含块是什么。如果元素的宽度为100％，则其宽度为包含块宽度的100％。如果元素的宽度为100vw，则其宽度为视口宽度的100％（视口可能不是元素的包含元素，但视口百分比单位将始终相对于视口）。
A strictly percentage based width will always be relative to another element's width, but when using viewport-percentage lengths, an element's width can actually be relative to the viewport's height. For instance, if an element has a width of 100vh, it will have a width of 100% of the viewport's height. This isn't possible when using strictly percentage based widths.
基于百分比的严格宽度始终相对于另一个元素的宽度，但在使用视口百分比长度时，元素的宽度实际上可以相对于视口的高度。例如，如果元素的宽度为100vh，则其宽度为视口高度的100％。使用严格基于百分比的宽度时，这是不可能的。
Viewport-percentage length are always going to be relative to their initial containing block, which is the viewport:
视口百分比长度始终相对于其初始包含块（即视口）：
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
5.1.2。视口百分比长度：'vw'，'vh'，'vmin'，'vmax'单位
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。
Whereas percentage based units are going to be relative to their parent element (i.e., their containing block), which may happen to be the body/html element, in which case they will be similar to viewport-percentage lengths.
而基于百分比的单位将相对于其父元素（即，它们的包含块），这可能恰好是body / html元素，在这种情况下，它们将类似于视口百分比长度。
4.3. Percentages: the ‘
<percentage>’ type4.3。百分比：'
'类型 Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.
百分比值始终相对于另一个值，例如长度。允许百分比的每个属性还定义百分比所引用的值。该值可以是同一元素的另一个属性的值，祖先元素的属性或格式化上下文的值（例如，包含块的宽度）。如果为根元素的属性设置了百分比值，并且百分比被定义为引用某个属性的继承值，则结果值是该属性的初始值的百分比乘以。
#1
9
They aren't necessarily interchangeable.
它们不一定是可以互换的。
The behavior will mainly depend on the element's position in the DOM, since this will determine what the element's containing block is. If an element has a width of 100%, it will have a width of 100% of the containing block's width. If the element has a width of 100vw, it will have a width of 100% of the viewport's width (the viewport may not be the element's containing element, but viewport-percentage units will always be relative to the viewport).
行为将主要取决于元素在DOM中的位置，因为这将确定元素的包含块是什么。如果元素的宽度为100％，则其宽度为包含块宽度的100％。如果元素的宽度为100vw，则其宽度为视口宽度的100％（视口可能不是元素的包含元素，但视口百分比单位将始终相对于视口）。
A strictly percentage based width will always be relative to another element's width, but when using viewport-percentage lengths, an element's width can actually be relative to the viewport's height. For instance, if an element has a width of 100vh, it will have a width of 100% of the viewport's height. This isn't possible when using strictly percentage based widths.
基于百分比的严格宽度始终相对于另一个元素的宽度，但在使用视口百分比长度时，元素的宽度实际上可以相对于视口的高度。例如，如果元素的宽度为100vh，则其宽度为视口高度的100％。使用严格基于百分比的宽度时，这是不可能的。
Viewport-percentage length are always going to be relative to their initial containing block, which is the viewport:
视口百分比长度始终相对于其初始包含块（即视口）：
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
5.1.2。视口百分比长度：'vw'，'vh'，'vmin'，'vmax'单位
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。
Whereas percentage based units are going to be relative to their parent element (i.e., their containing block), which may happen to be the body/html element, in which case they will be similar to viewport-percentage lengths.
而基于百分比的单位将相对于其父元素（即，它们的包含块），这可能恰好是body / html元素，在这种情况下，它们将类似于视口百分比长度。
4.3. Percentages: the ‘
<percentage>’ type4.3。百分比：'
'类型 Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.
百分比值始终相对于另一个值，例如长度。允许百分比的每个属性还定义百分比所引用的值。该值可以是同一元素的另一个属性的值，祖先元素的属性或格式化上下文的值（例如，包含块的宽度）。如果为根元素的属性设置了百分比值，并且百分比被定义为引用某个属性的继承值，则结果值是该属性的初始值的百分比乘以。