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 a video:
I once had a use case for using vw to define a height to maintain image ratio of background image. It was very css-tricky and practical, the best kind of css-tricky.
Do you have a CodePen or anything for it? That sounds interesting!
It’s basically the trick that is used for responsive embeds of YouTube and the like.
Instead of a percentage value vw works too (as it is a percentage value of the viewport instead of the parent).
There’s a pen for you to play around: http://codepen.io/ovlb/pen/mWMmey
That’s great! Thanks!
Nice! That looks like a great alternative to using media queries. The same basic outcome with less CSS.
This is a pretty cool thing.
There is a little bit of a bummer when on some mobile browsers, on chrome for android and mobile safari(I think) when you scroll and the address bar hides, the viewport size changes causing causing another page layout and pushing everything down now that the viewport is just a little bigger. It’s not the worst, but it’s a small bit of jank.
This is supposed to have been fixed recently, see: https://bugs.chromium.org/p/chromium/issues/detail?id=428132
Man, how did I miss
vmin
? I needed it and ended up writing a media query that used eithervw
orvh
depending onorientation: portrait
ororientation: landscape
. Silly me. Nice! :)Thank you maaannn, That’s awesome. I’m looking for that for few months
I love to play around with vmin.
There are some nice tricks when working with it.
Here are two examples I did.
Building a square element using vmin:
Responsive headlines using vmin::
Very nice technique! I love vmin and the entire viewport family.