vw和vh单位如何工作？

Question

我想知道如何计算vh和vw的值。我正在设计一个使用2vw的网站，它可以完美地用于我的文本。但是，我猜对了。请告诉我这些装置是如何工作的，以便我将来可以使用它们。我也想知道他们是否有跨浏览器支持。

Answer 1

vw和vh分别是窗口宽度和高度的百分比：100vw是宽度的100％，80vw是80％等等。

要以像素为单位计算值，您只需执行类似

的操作

vwToPx = function(vwValue) {
    return $(window).outerWidth()/100*vwValue;
}

您应该注意的一件事是，移动版Safari仍会错误地呈现vh，除了最新的Android浏览器之外的任何内容都无法处理任何一个单元。请参阅caniuse。

有关详细信息，请查看csstricks.com上的this article。