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