robohash image acting as kam's profile photo

Tip 006 - More Viewport Things


Last week we went over some viewport units, vw and vh. We also left it on a cliffhanger. See, I know how to do Fridays. We'll get back to that example, but FIRST! There's a couple other viewport doodads that are super fun and helpful:

  • vmin
  • vmax

These take the other viewport units to the next level. 1vmin equals 1% of either the viewport width or height, whichever is smaller. Also, 1vmax equals 1% of either the viewport width or height, whichever is larger.

In the examples from Jen Simmons last time, you might have noticed a few of these units sprinkled around in there. That's what helped things inside each section maintain their shape, rather than getting stretched around when the window size changed. But now, back to that example.

Here's the scenario: you want to make the font size bigger on desktops than it is on phones. Pretty standard idea. Most of the time, you can use media queries and make the size bigger at a few certain breakpoints and call it a day. But you can't make a media query for every possible size, and you want that text to look good no matter what. So you hatch a plan to make the font size viewport units instead of pixels or even em's. Just setting the font-size: 2vw; might work, but it might be too small. Making it much bigger might make it too big. After a lot of massaging and kicking over a few chairs, you try a few different units and adding them together with the calc() function: font-size: calc(3vw + 3vh + 1vmin);

You can see this in action below. Credit goes to CrocoDillon on CodePen for the original pen.

See the Pen Mixing vw and vh in font-size by Kam Black (@kamblack) on CodePen.


Have you written a reply on another site? Put the URL here: