但是如果容器不是视口（主体）呢？
Alex 在the accepted answer 下的评论中提出了这个问题。
这一事实并不意味着vw 在某种程度上不能用于确定该容器的大小。现在要看到任何变化，必须假设容器在某种程度上是灵活的。无论是通过直接百分比width 还是通过 100% 减去利润率。如果容器始终设置为 200px 宽，则该点变得“没有意义”——然后只需设置适用于该宽度的 font-size。
示例 1
但是，对于灵活宽度的容器，必须意识到在某些方面容器仍然在视口之外调整大小。因此，需要根据与视口的百分比大小差异调整vw 设置，这意味着要考虑父包装器的大小。 Take this example:
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
这里假设div 是body 的子代，它是50% 的100% 宽度，这是基本情况下的视口大小。基本上，您想要设置一个看起来不错的vw。正如您在我对上述 CSS 内容的评论中看到的那样，您可以在数学上“思考”关于完整视口大小的问题，但您不需要 这样做。文本将随着容器“弯曲”，因为容器随着视口大小的调整而弯曲。更新：here's an example of two differently sized containers。
示例 2
您可以通过强制基于此的计算来帮助确保视口大小。 Consider this example:
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
大小仍然基于视口，但本质上是基于容器大小本身设置的。
容器的大小是否应该动态变化...
如果容器元素的大小最终通过@media 断点或通过 JavaScript 动态改变其百分比关系，那么无论基本“目标”是什么，都需要重新计算以保持文本大小的相同“关系”。
以上面的示例 #1 为例。如果div 通过@media 或JavaScript 切换到25% 宽度，那么同时，font-size 需要在媒体查询或通过JavaScript 中调整为5vw * .25 = 1.25 的新计算.这将使文本大小与原始 50% 容器的“宽度”从视口大小减少一半时的大小相同，但现在由于其自身百分比计算的变化而减小。
挑战
使用the CSS3 calc() function，动态调整将变得困难，因为此时该功能不适用于font-size。因此，如果您的宽度在 calc() 上发生变化，则无法进行纯 CSS 3 调整。当然，对边距宽度的细微调整可能不足以保证 font-size 的任何更改，因此可能无关紧要。