Tutorials

CSS @media height Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS allows for responsive design by applying styles based on certain conditions, such as screen size, device type, or orientation.

The height feature within the @media rule helps target devices or viewports with specific heights. This allows developers to apply different styles depending on the height of the viewport, ensuring a more flexible and user-friendly experience across various devices.

💡 Syntax

The syntax for using the height feature in the @media rule is straightforward. You define the media query with a specific height condition, and inside the query, you can place the styles you want to apply.

Syntax

Copied

@media (min-height: height-value) {
  /* CSS rules */
}

@media (max-height: height-value) {
  /* CSS rules */
}

🏠 Property Values

min-height: Sets the minimum height at which the styles inside the media query will apply.
max-height: Sets the maximum height at which the styles inside the media query will apply.
height-value: A length value representing the height of the viewport. It can be set in pixels (px), ems (em), or percentage (%).

🎛️ Default Value

There is no default value for height in a media query because it must be explicitly defined within the query based on the developer's requirements.

📝 Example Usage

📜 Basic Usage

In this example, we will change the background color of the page depending on the height of the viewport.

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 height Example</title>
  <style>
    body {
      background-color: lightblue;
    }

    /* When the viewport height is at least 600px */
    @media (min-height: 600px) {
      body {
        background-color: lightgreen;
      }
    }

    /* When the viewport height is at most 400px */
    @media (max-height: 400px) {
      body {
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <h1>Resize the browser height to see the effect</h1>
</body>
</html>

🖥️ Browser Compatibility

The @media rule with the height feature is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is essential to ensure your styles behave as expected across different browsers and devices by testing thoroughly.

🎉 Conclusion

The @media rule with the height feature is a useful tool for creating responsive designs that adapt to different viewport heights.

By utilizing min-height and max-height, you can control how your layout and styles change as the user adjusts their browser or switches devices, ensuring a seamless experience across all platforms.