CSS aspect-ratio Media Feature

Definition and Usage

The aspect-ratio media feature tests the viewport’s width-to-height ratio.

Use @media (min-aspect-ratio: 16/9) for wide viewports, @media (max-aspect-ratio: 1/1) for square-or-taller ones, and @media (aspect-ratio: 1/1) for an exact match. It is a range feature — not the same as the aspect-ratio property, which sizes a single element.

CSS Syntax

Write ratios as width/height (for example 16/9 or 1/1). Always wrap the feature in parentheses.

Feature Values

How to Use aspect-ratio

Ship a solid default layout, then branch for wide or tall viewports with min/max queries.

1. Design the default for the most common viewport shape you support.
2. Use min-aspect-ratio for widescreen tweaks (side-by-side columns, cinematic heroes).
3. Use max-aspect-ratio for tall/narrow tweaks (stacked cards, larger type).
4. Prefer ranges over exact aspect-ratio — exact matches are rare while resizing.

Live Preview

This viewport’s ratio via matchMedia. Resize the window to see the chips and sample box update.

CSS Examples

Each snippet focuses on the viewport aspect-ratio media feature. Resize the browser (or open Try It Yourself) to see the match change.

<style>
  .panel {
    padding: 16px;
    background: #64748b;
    color: #fff;
  }

  @media (min-aspect-ratio: 16/9) {
    .panel {
      background: #2563eb;
    }
  }
</style>

<div class="panel">Hero panel</div>

<style>
  .panel {
    padding: 16px;
    background: #64748b;
    color: #fff;
  }

  @media (max-aspect-ratio: 1/1) {
    .panel {
      background: #16a34a;
    }
  }
</style>

<div class="panel">Phone layout</div>

<style>
  .panel {
    padding: 16px;
    background: #64748b;
    color: #fff;
  }

  @media (aspect-ratio: 1/1) {
    .panel {
      background: #dc2626;
    }
  }
</style>

<div class="panel">Square viewport</div>

Key Takeaways