Retour au cours

Lesson 89: Horizontal vs. Vertical Viewport Orientation

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

89. Horizontal vs. Vertical Viewport Orientation

Media queries can target device orientation, allowing you to optimize a layout when a user rotates their phone or tablet.

The orientation Feature

This feature checks whether the viewport height is greater than or less than the viewport width.

  1. portrait: The viewport height is greater than or equal to the viewport width (a typical phone holding position).
  2. landscape: The viewport width is greater than the viewport height.

css /* Styles apply when the device is held horizontally / @media (orientation: landscape) { / Maximize usage of horizontal space / .main-section { column-count: 2; / Split content into two columns */ } }

/* Styles apply when the device is held vertically / @media (orientation: portrait) { / Prioritize vertical stacking */ .main-section { column-count: 1; } }

Note: Orientation queries are often combined with width queries (e.g., (min-width: 400px) and (orientation: landscape)) to target specific device capabilities.