CSS @media orientation Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media orientation property in CSS is used to apply specific styles based on the orientation of the device's screen. It helps developers create responsive designs that adapt depending on whether the device is in portrait or landscape mode.

This is particularly useful for enhancing the user experience on mobile devices and tablets, where the screen orientation can frequently change.

💡 Syntax

The syntax for the @media orientation property follows the basic structure of a media query. You can define styles for portrait or landscape orientations.

Syntax

Copied

@media (orientation: portrait) {
  /* Styles for portrait orientation */
}

@media (orientation: landscape) {
  /* Styles for landscape orientation */
}

🏠 Property Values

portrait: Applies styles when the height of the viewport is greater than its width.
landscape: Applies styles when the width of the viewport is greater than its height.

🎛️ Default Value

The @media orientation property does not have a default value, as it’s based on the actual screen orientation of the device. If no media queries are defined, the default styles in your CSS will apply.

📝 Example Usage

📜 Basic Usage

In this example, different background colors are applied depending on the screen orientation.

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media orientation Example</title>
  <style>
    /* Styles for portrait orientation */
    @media (orientation: portrait) {
      body {
        background-color: lightblue;
      }
    }

    /* Styles for landscape orientation */
    @media (orientation: landscape) {
      body {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <h1>Resize your device or browser to see the effect!</h1>
</body>
</html>

In this example, the background color changes to light blue in portrait mode and light green in landscape mode. Try resizing the browser window or rotating your device to see the effect.

🖥️ Browser Compatibility

The @media orientation property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It works seamlessly on most mobile and tablet devices. As always, it’s recommended to test your styles across different browsers and devices to ensure consistent behavior.

🎉 Conclusion

The @media orientation property is a powerful tool for creating responsive and adaptable web designs. By targeting different screen orientations, you can ensure that your content remains visually appealing and easy to use, whether viewed in portrait or landscape mode. This enhances the user experience and helps your website work well across a wide range of devices.