The orientation media feature applies styles conditionally based on whether the current viewport is taller than it is wide (portrait) or wider than it is tall (landscape).

Syntax

@media (orientation: portrait) { ... }
@media (orientation: landscape) { ... }

Deep Dive Course

orientation is determined purely by comparing the viewport's current width against its current height, portrait meaning height is greater than or equal to width, and landscape meaning width is greater than height, regardless of what specific device is being used or how that device's own physical orientation sensor might report its rotation — a desktop browser window can trigger orientation: portrait simply by being resized taller than it is wide, entirely independent of any actual physical device rotation. This makes it useful for adjusting layouts specifically suited to a wider-than-tall or taller-than-wide viewport shape, like switching a video player's controls layout or a grid's column count based on the available aspect ratio.

1Understanding Orientation

💡

orientation is based purely on the current viewport's width-versus-height comparison, not a physical device's actual rotation sensor — resizing a plain desktop browser window to be taller than it is wide triggers orientation: portrait, even on a desktop computer with no rotation capability at all.

editor.html

@media (orientation: landscape) {
  .video-controls {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .video-controls {
    flex-direction: column;
  }
}

localhost:3000

2Practical Example

Here is a real-world application of Orientation showing how it is used in production CSS code.

editor.html

@media (orientation: portrait) and (max-width: 500px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

localhost:3000

3Best Practices

Follow these guidelines when working with Orientation:

1. Use orientation queries specifically for layout adjustments that genuinely depend on the viewport's relative width-versus-height shape, like a video player's control layout

2. Remember orientation applies equally to a resized desktop browser window as to an actual rotated mobile device, since it's purely a width/height comparison

3. Combine orientation with width-based queries when a specific adjustment should only apply within a particular combination of both screen size and aspect ratio

⚠️

Tip: orientation is based purely on the current viewport's width-versus-height comparison, not a physical device's actual rotation sensor — resizing a plain desktop browser window to be taller than it is wide triggers orientation: portrait, even on a desktop computer with no rotation capability at all.

editor.html

@media (orientation: landscape) {
  .video-controls {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .video-controls {
    flex-direction: column;
  }
}

localhost:3000

Examples

Example 01Basic Usage

@media (orientation: landscape) {
  .video-controls {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .video-controls {
    flex-direction: column;
  }
}

Example 02Advanced Example

@media (orientation: portrait) and (max-width: 500px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Best Practices

Use orientation queries specifically for layout adjustments that genuinely depend on the viewport's relative width-versus-height shape, like a video player's control layout
Remember orientation applies equally to a resized desktop browser window as to an actual rotated mobile device, since it's purely a width/height comparison
Combine orientation with width-based queries when a specific adjustment should only apply within a particular combination of both screen size and aspect ratio

Interview Question

Why does resizing a plain desktop browser window to be taller than it is wide trigger the exact same orientation: portrait media query as physically rotating a mobile phone into a vertical position?▼

Hint: Think about what orientation is actually defined to measure — a device's physical rotation sensor reading, or a simple mathematical comparison between two values.

The orientation media feature isn't defined in terms of any device's physical rotation sensor or hardware orientation capability at all, it's defined purely as a mathematical comparison between the current viewport's width and height values, evaluating to portrait whenever height is greater than or equal to width, and landscape whenever width is strictly greater than height, based solely on those two current dimension values regardless of where they actually came from. A desktop browser window has a width and a height just like any other viewport, and resizing that window so its height numerically exceeds its width satisfies the exact same mathematical condition that a portrait-oriented, actually-rotated phone's viewport would also satisfy, triggering the identical media query match in both cases, since the query genuinely doesn't distinguish between these two very different underlying causes of the same width-versus-height relationship. This is exactly why orientation should be understood as a pure viewport-shape comparison, not a literal query about physical device rotation, even though its most common real-world trigger does happen to be an actual mobile device being rotated.

Exercises

MediumPractice using Orientation in a real scenario.

View Solution

@media (orientation: landscape) {
  .video-controls {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .video-controls {
    flex-direction: column;
  }
}

Frequently Asked Questions

Related Functions

Media-queriesRefScreenDimensionsResolution