html - 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 上的这篇文章。