CSS How to Use Media Query for Orientation

Use the CSS media query @media (orientation: portrait) or @media (orientation: landscape) to apply styles depending on the device's orientation.

Examples

Input@media (orientation: portrait) { body { background: lightblue; } }

OutputThe page background turns light blue when the device is in portrait mode.

Input@media (orientation: landscape) { body { background: lightgreen; } }

OutputThe page background turns light green when the device is in landscape mode.

Input@media (orientation: portrait) { p { font-size: 1.5rem; } }

OutputParagraph text becomes larger only when the device is in portrait orientation.

How to Think About It

To use media queries for orientation, think about checking if the device is held tall (portrait) or wide (landscape). Then write CSS rules inside @media blocks with orientation: portrait or orientation: landscape to apply styles only in those cases.

Algorithm

1

Decide which orientation you want to target: portrait or landscape.

2

Write a CSS media query using <code>@media (orientation: desired_orientation)</code>.

3

Place the CSS rules inside the media query block.

4

When the device orientation matches, the styles inside the block apply automatically.

Code

css

@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

Output

The page background is light blue in portrait mode and light green in landscape mode.

Dry Run

Let's trace how the background color changes with device orientation.

1

Check orientation

Device is held tall, so orientation is portrait.

2

Apply portrait styles

Background color changes to lightblue.

3

Change orientation

Device is rotated to wide, orientation is landscape.

4

Apply landscape styles

Background color changes to lightgreen.

Step	Orientation	Background Color
1	portrait	lightblue
4	landscape	lightgreen

Why This Works

Step 1: Orientation media feature

The orientation media feature detects if the device is in portrait or landscape mode.

Step 2: Conditional styling

Using @media (orientation: portrait) applies styles only when the device is tall.

Step 3: Automatic updates

When the device rotates, the browser automatically applies the correct styles inside the matching media query.

Alternative Approaches

Use JavaScript to detect orientation

css

window.addEventListener('resize', () => {
  if(window.innerHeight > window.innerWidth) {
    document.body.style.backgroundColor = 'lightblue';
  } else {
    document.body.style.backgroundColor = 'lightgreen';
  }
});

This method uses JavaScript to change styles on resize but is less efficient than CSS media queries.

Use aspect-ratio media query

css

@media (min-aspect-ratio: 1/1) {
  body { background-color: lightgreen; }
}
@media (max-aspect-ratio: 1/1) {
  body { background-color: lightblue; }
}

This uses aspect ratio to guess orientation but is less direct and less readable than orientation media feature.

Complexity: O(1) time, O(1) space

Time Complexity

Media queries are evaluated by the browser instantly on orientation change, so the time cost is constant.

Space Complexity

No extra memory is needed beyond the CSS rules defined, so space complexity is constant.

Which Approach is Fastest?

CSS media queries are faster and more efficient than JavaScript detection because they are handled natively by the browser.

Approach	Time	Space	Best For
CSS orientation media query	O(1)	O(1)	Simple, efficient style changes on orientation
JavaScript resize detection	O(1) per resize event	O(1)	Dynamic control but less efficient
Aspect-ratio media query	O(1)	O(1)	Alternative to orientation but less clear