Tag: css tricks

Viewport-percentage lengths: the vw, vh, vmin, vmax units

Excerpt from w3.org:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

When I design a new layout, I’ll keep in mind this option because it’s pretty handy if we think in terms of responsive design.

vw unit: Equal to 1% of the width of the initial containing block.
vh unit: Equal to 1% of the height of the initial containing block.
vmin unit: Equal to the smaller of vw or vh.
vmax unit: Equal to the larger of vw or vh.

Here is my CSS:

CSS
CSS
1
2
3
4
5
6
7
8
s100 { background-color: #E8DAEF; padding: 9px; font-size: 5vw; width: 100vw; }
.s75 { background-color: #F8C471; padding: 9px; width: 75vw; font-size: 4vh; }
.s35 { background-color: #C0392B; padding: 9px; width: 35vw; font-size: 4vh; }
.smax { background-color: #BB8FCE; padding: 9px; width: 50vmax; font-size: 3vh; }
.smin { background-color: #D6DBDF; padding: 9px; width: 90vmin; font-size: 3vh; }
.h100 { background-color: #EBF5FB; padding: 9px; height: 100vh; font-size: 10vh; }
.h50 { background-color: #D5F5E3; padding: 9px; height: 50vh; font-size: 10vh; }
.h35 { background-color: #FCF3CF; padding: 9px; height: 35vmax; font-size: 5vh; }

Here is the HTML code:

XHTML
1
2
3
4
5
6
7
8
<div class="s100">width: 100vw; font-size: 5vw</div>
<div class="s75">width: 75vw; font-size: 4vh</div>
<div class="s35">width: 35vw; font-size: 4vh</div>
<div class="smax">width: 50vmax; font-size: 3vh</div>
<div class="smin">width: 90vmin; font-size: 3vh</div>
<div class="h100">width: 100vh; font-size: 10vh</div>
<div class="h50">width: 50vh; font-size: 10vh</div>
<div class="h35">width: 35vmax; font-size: 5vh</div>

Try it Yourself / Demo