Aspect Ratios

As somewhat of a cousin to matching against width or height, we can also target specific viewport aspect ratios or ranges of, using the media features named aspect-ratio, min-aspect-ratio or max-aspect-ratio. The latter two can also be usefully combined with the logical operator and to detect between ratio ranges.

Note: the aspect-ratio media feature specifically matches a viewport, not a device. For devices you want device-aspect-ratio.

@media (aspect-ratio: 16/9) {
}

@media (min-aspect-ratio: 8/5) {
}

@media (max-aspect-ratio: 3/2) {
}

@media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) {
}

@media (device-aspect-ratio: 16/9) {
}
Copy this snippet