Viewport percentage units are a CSS definition which allows a value, such as a div width or font size to be scaled according to the screen size.
The values are:
- vw – viewport width
- vh – viewport height
- vmin – the smaller of vw or vh
- vmax – the larger or vw or vh
Where 1v is equivalent to 1% of the initial containing block
The viewport percentage units can be used like this:
.main-content{
height:80vh
width:100vh;
}
or to size text:
p {font-size: 4vw;}
As you can see, when the viewport width increases, so does the font-size, and without the need for media queries.
A nice way to dynamically change the font size, without all those @media viewport size settings. Except, you may find it uncontrolled and difficult to reliably contain within the surrounding components.
These values are a sizing unit just like px or em, so it can be used to size other elements as well, such as width, margin or padding.
One thing to note however, is that the font-size is not generated dynamically. So if you resize your viewport, the font-size will retain its initial size and will only be recalculated on page reload.
Examples
Consider a browser having a width of 1200px and height of 1500px.
- a width of 20vw will give a value of 0.2 * 1200 = 240px
- a height of 5vh giving 1500 * 0.05 = 75px
- vw (20vw) combined with vmin (10vmax) will give the minimum of the two edges:
0.1 * 1200 = 120px or 0.1 * 1500 = 150px.
Thus the value of the given size will be 120px.
