The other day I was playing with a fullscreen CSS layout using viewport units. I had content that was a fixed aspect-ratio, and I wanted it to fill as much of the screen as possible without overflowing. At first, I was setting the element’s width to
100vw, but of course, if the aspect ratio of the window was greater than the aspect ratio of the content, the content would overflow off the screen. In those cases, I wanted to bind the height of the content to
100vh, instead of binding the width to
$size = max(100vh, 100vw);
In hindsight, this is obviously not going to work. The result of this expression is going to change as the viewport aspect ratio changes. Fundamentally, this is something Sass can’t deal with. Sass kindly explained that to me:
Error: Incompatible units: ‘vh’ and ‘vw’.
After some googling, I came across aspect-ratio media queries. This is exactly what I needed! To build my layout, I use an aspect-ratio media query to alternate between binding against
vw based on whether the screen is in a horizontal aspect ratio, or a vertical one.
I whipped up a quick codepen to show this off. Resize the viewport to see it in action: