A little known Media Query: Aspect Ratio

As we are eagerly looking forward to container queries, and an overall push towards intrinsic design, I wanted to point out that there is a kind of media query that often gets overlooked: aspect ratio.

// width / height
@media (min-aspect-ratio: 16/9) {
  // something you want to happen at a wider than 16:9 aspect ratio

That is, you can create a media query that is based on the viewport's aspect ratio - not simply it's width.

To be fair, use cases for this are few and far between. Some that I can think of:

There are three variations of this media query:

// wider than 16:9
@media (min-aspect-ratio: 16/9) {...}
// narrower than 16:9
@media (max-aspect-ratio: 16/9) {...}
// exactly 16:9
@media (aspect-ratio: 16/9) {...}

Support for the Aspect Ratio Media Query

Now, this might be the part where you expect me to tell you that this only works in one current browser or something.

It actually has great support, and has for a while. It was in IE9 and Safari 4.2!