fbpx

While vh and vm are always related to the viewport height and width, respectively,vmin and vmax are related to the maximum or minimum of those widths and heights, depending on which is smaller and larger. For example, if the browser was set to 1100px wide and the 700px tall, 1vmin would be 7px and 1vmax would be 11px. However, if the width was set to 800px and the height set to 1080px, vminwould be equal to 8px while vmax would be set to 10.8px.

So, when might you use these values?

Imagine you need an element that is always visible on screen. Using a height and width set to a vmin value below 100 would enable this. For example, a square element that always touches at least two sides of the screen might be defined like this:

.box {
height: 100vmin;
width: 100vmin;
}

vmin

If you needed a square box that always covers the visible viewport (touching all four sides of the screen at all times), use the same rules except with vmax.

.box {
height: 100vmax;
width: 100vmax;
}

vmax

Combinations of these rules provide a very flexible way of utilizing the size of your viewport in new and exciting ways.