Menu
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.
274
To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen. And of course, VW stands for “viewport width”, which is the viewable screen's width.
Viewport Width (vw). This unit is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.
The allowed units are: vw : hundredths of the viewport width. vh : hundredths of the viewport height. vmin : hundredths of whichever is smaller, the viewport width or height. vmax : hundredths of whichever is larger, the viewport width or height.
Congratulations! Now, can confidently use the REM, EM, VW, and VH units to make perfectly responsive websites.
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.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
