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).