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 {
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 a video:
Simple Little Use Case for `vmin` is a post from CSS-Tricks
