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 .

有关更多信息，您可以查看 this article在 csstricks.com 上。