CSS @media aspect-ratio Property

Posted in CSS Tutorial

Updated on Sep 14, 2024

By Mari Selvan

👁️ 6 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS allows developers to apply styles depending on certain conditions, such as the width, height, or aspect ratio of the viewport.

The aspect-ratio media feature allows you to target specific aspect ratios of the viewport or device, helping you create responsive designs that adapt well to different screen sizes and orientations.

This feature is particularly useful for ensuring that elements maintain their aspect ratio across devices with varying resolutions, like desktops, tablets, or smartphones.

💡 Syntax

The aspect-ratio media feature is typically used within a @media query. The syntax allows you to define a specific aspect ratio or a range of aspect ratios to apply the relevant styles.

Syntax

Copied

@media (aspect-ratio: width/height) {
  /* CSS rules */
}

You can also use comparison operators like min-aspect-ratio and max-aspect-ratio to target ranges of aspect ratios.

Syntax

Copied

@media (min-aspect-ratio: width/height) {
  /* CSS rules */
}

@media (max-aspect-ratio: width/height) {
  /* CSS rules */
}

🏠 Property Values

exact ratio: Specifies an exact aspect ratio in the format width/height, like 16/9 or 4/3.
min-aspect-ratio: Defines a minimum aspect ratio for applying styles, ensuring that the styles are applied only when the viewport’s aspect ratio is equal to or greater than the specified value.
max-aspect-ratio: Defines a maximum aspect ratio for applying styles, ensuring that the styles are applied only when the viewport’s aspect ratio is equal to or less than the specified value.

🎛️ Default Value

There is no default value for the aspect-ratio media feature because it is always dependent on the current device or viewport's aspect ratio.

📝 Example Usage

📜 Basic Usage

In this example, the background color will change when the viewport has an aspect ratio of exactly 16:9.

example.css

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@media aspect-ratio Example</title>
  <style>
    body {
      background-color: lightblue;
    }

    @media (aspect-ratio: 16/9) {
      body {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <h1>Resize the Window to See the Effect</h1>
  <p>When the aspect ratio is 16:9, the background color will change to light green.</p>
</body>
</html>

📜 Example 2: Using min-aspect-ratio

This example applies styles when the viewport’s aspect ratio is at least 4:3.

example.css

Copied

@media (min-aspect-ratio: 4/3) {
  body {
    background-color: pink;
  }
}

🖥️ Browser Compatibility

The aspect-ratio media feature is supported by most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. Ensure that you test your designs across different devices and screen sizes to verify that the aspect ratio-based media queries work as intended.

🎉 Conclusion

The @media aspect-ratio property is a useful tool in responsive design, allowing developers to fine-tune their websites based on the device's screen proportions. This helps maintain consistency across different aspect ratios, ensuring that your website looks great on a variety of devices. Incorporating aspect ratio media queries can improve the overall adaptability and user experience of your web projects.