What does min-aspect-ratio mean and what does it look like?

For a long time I wondered what the media-query min-aspect-ratio does exactly. What does something like @media (min-aspect-ratio: 1000/1414) mean, and more importantly, what does it do. The spec is concise. It simply says the ‘aspect-ratio’ media feature is defined as the ratio of the value of the ‘width’ media feature to the value of the ‘height’ media feature.

This means that if a viewport is 600 pixels wide, and 300 pixels high, it would respond to @media (aspect-ratio: 600/300). This is not very hard to understand, I think. I found it hard to understand what the min and max prefixes do. What do they mean? Does a viewport of 601×300 respond to @media (min-aspect-ratio: 600/300), or to @media (max-aspect-ratio: 600/300)? It’s actually pretty easy to understand. The numbers in the media-query form a simple division. In our example, 600/300 = 2, and 601/300 = 2.0033. You probably know that 2.0033 is a bit bigger than 2, so a viewport dimension of 601×300 responds to @media (min-aspect-ratio: 600/300).

Sure, but what do those ratios look like?

I collected a few ratios that are used quite often. Like screen ratios or ratios often seen in film or photos. And I ordered them from small to big in this simple what’s a ratio tool. Just resize your screen, or open it in your favourite device, and see for yourself.

What’s the use case?

Why would you want to use a ratio media-query? I can think of a few use cases. The most important one is setting a padding on the body that relates to the viewport. You could use the ‘orientation’ media feature for this, but if you want finer control, ratio is what you need.

Why a division?

It would have been nice if you could fill in the result of the division, instead of the division itself, but that doesn’t seem to work. Alas, no simple @media (min-aspect-ratio: 1.618).

Also good to know: the numbers need to be integers, floating points don’t work. @media (min-aspect-ratio: 1.414/1) is ignored, you should write it as @media (min-aspect-ratio: 1414/1000).