This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
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)
.