Simple Little Use Case for `vmin`

Viewport units are things like 10vw (10% of the viewport width) or 2vh (2% of the viewport height). Useful sometimes, as they are always relative to the viewport. No cascading or influence by parent elements.

There is also vmin, which is the lesser of vw and vh, and vmax, which is the greater. These values can be used for anything that takes a length value, just like px or em or % or whatever.

Let’s take a look at a tiny design pattern that makes use of vmin.

A header block!

If we set the padding of an <header> like so:

header {
  padding: 10vmin 1rem;
}

We get some fixed padding (1rem) on the outsides, so for example text set inside there never actually touches the edges. We also get a header that sizes itself in what feels like an appropriate way depending on the screen real estate.

Sizing based on the minimum of the two browser window dimensions seems to feel right, rather than basing it solely on width or height.

Here’s the demo.

Here’s a video: