Aspect Ratio Media Query

Using the aspect-ratio Media Feature

The aspect-ratio media feature lets you apply styles based on the viewport's width-to-height ratio, rather than absolute pixel values.

The Query

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

@media (min-aspect-ratio: 16/9) {
  /* 16:9 or wider */
}

@media (max-aspect-ratio: 4/3) {
  /* 4:3 or taller */
}

Common Aspect Ratios

Ratio	Decimal	Common Devices
9/16	0.5625	Phone portrait
3/4	0.75	iPad portrait
1/1	1.0	Square displays
4/3	1.333	iPad landscape, older monitors
16/9	1.778	Most laptops, TVs
21/9	2.333	Ultrawide monitors

Practical Example

/* Ultrawide monitors: use three-column layout */
@media (min-aspect-ratio: 21/9) {
  .dashboard {
    grid-template-columns: 250px 1fr 300px;
  }
}

/* Tall screens (phone portrait): stack vertically */
@media (max-aspect-ratio: 9/16) {
  .split-view {
    flex-direction: column;
  }
}

When to Use aspect-ratio vs width

• Use width breakpoints for general responsive design
• Use aspect-ratio when the layout depends on the shape of the viewport rather than its absolute size (e.g., full-screen apps, games, video players)
• Aspect ratio is particularly useful for embedded content that needs to fill its container proportionally