How do vw and vh units work?

Question

I want to know how to calculate the value for vh and vw. I am designing a website that uses 2vw and its working perfectly for my text. However, I just guessed. Please tell me how these units work so I can use them in the future. I'd also like to know if they have cross browser support.

Answer 1

vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc.

To calculate the value in pixels, you would just do something like

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

One thing you should be aware of is that mobile Safari still renders vh incorrectly, and anything but the most recent Android browser can't handle either unit. See caniuse.

For more information, you might look at this article on csstricks.com.