Simple Little Use Case for `vmin`

Avatar of Chris Coyier
Chris Coyier on

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.

Large and in charge on large desktop views.
When there is less vertical room, it shortens up so that it isn’t getting in the way of content.
Portrait mobile views seem balanced.
Small screen landscape
Super tall and narrow still feels right. Which it doesn’t really factoring in just viewport height alone.

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: