{"id":252564,"date":"2017-03-09T07:06:56","date_gmt":"2017-03-09T14:06:56","guid":{"rendered":"http:\/\/css-tricks.com\/?p=252564"},"modified":"2017-03-09T07:06:56","modified_gmt":"2017-03-09T14:06:56","slug":"simple-little-use-case-vmin","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/simple-little-use-case-vmin\/","title":{"rendered":"Simple Little Use Case for `vmin`"},"content":{"rendered":"

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.<\/p>\n

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. <\/p>\n

Let’s take a look at a tiny design pattern that makes use of vmin<\/code>.<\/p>\n

<\/p>\n

A header block!<\/h3>\n

If we set the padding<\/code> of an <header><\/code> like so:<\/p>\n

header {\r\n  padding: 10vmin 1rem;\r\n}<\/code><\/pre>\n
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. <\/p>\n
\"\"
Large and in charge on large desktop views.<\/figcaption><\/figure>\n
\"\"
When there is less vertical room, it shortens up so that it isn’t getting in the way of content.<\/figcaption><\/figure>\n
\"\"
Portrait mobile views seem balanced.<\/figcaption><\/figure>\n
\"\"
Small screen landscape<\/figcaption><\/figure>\n
\"\"
Super tall and narrow still feels right. Which it doesn’t really factoring in just viewport height alone.<\/figcaption><\/figure>\n
Sizing based on the minimum<\/em> of the two browser window dimensions seems to feel right, rather than basing it solely on width or height.<\/p>\n
Here’s the demo.<\/a><\/p>\n
Here’s a video:<\/p>\n