Vmin and vmax units are far less known and generally poorly understood. This is unfortunate, as the units have some truly novel use-cases in web development.

1vh is equal to 1% of the current viewport height (i.e. the open browser window), while 1vw is 1% of the current viewport width. vmin and vmax use those same units, but in response to particular rules:

1. vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh. If the width of the browser is less than it’s height, 1vmin is equvialent to 1vw.
2. vmax is the opposite: it uses the largest side. So 1vmax is equivalent to 1vw if the viewport is wider than it is tall; if the browser is taller than it is wide, 1vmax will be equivalent to 1vh.

What Are They Used For?

vmin and vmax is an excellent substitute for, or addition to, CSS orientation media queries (@media screen and (orientation : portrait) or @media screen and (orientation : landscape)), since they respond immediately to the aspect ratio of the screen.

Keeping Hero Text Under Control

I’ve previously demonstrated vw units for header text, but doing so has a significant problem: text that starts at a reasonable size in vw units rapidly gets out of control at extremely large or relatively small viewport sizes:

One solution is to apply @media query “clamps” to set the minimum and maximum font sizes, complicating your CSS. An alternative is to set the header font-size in vmin:

h1 {
  font-size: 20vmin;
  font-family: Avenir, sans-serif;
  font-weight: 900;
  text-align: center;
}

Measured in vmin, the size of the header text won’t get larger or smaller in a fully-expanded browser that is narrowed, since the unit responds to viewport height. But if the viewport becomes narrower than it is wide – in other words, if the page moves into a portrait orientation – the text will get larger or smaller, as shown in the related CodePen demo.

Keeping Features Above The Fold

A feature starting at the top of the page and measured at less than 100vh in height will always appear “above the fold” (that is, it will always remain above the lowest edge of the viewport window), but it can also appear needlessly large in some aspect ratios. If the min-height of the element is measured in vmax instead, it can appear appropriately large at wide window size, and relatively thin on narrow viewports:

header {
    background: #000;
    min-height: 8vmax;
}

This could be combined with a max-height to restrict the height of the element at extra-large viewport sizes.

Potential Complications

There are a few things to be aware of in regards of vmin and vmax:

1. Support in Mobile Safari has historically had a few bugs (hopefully addressed and fixed in the upcoming iOS 10 release). Rodney Rehm has a `“buggyfill” fix for the browser that addresses the issues.
2. IE9 uses vm to represent vmin, and does not support vmax. Support from IE 10 up is standard.

As I hope you can see, vmin and vmax really do have some outstanding uses; I hope they’ll find appropriate application in your own work.

---