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。