CSS @media resolution Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media resolution property in CSS allows web developers to apply styles based on the resolution of the user's device.

This media feature is part of the Media Queries specification and is particularly useful for creating responsive designs that adapt to different screen resolutions.

By using @media resolution, you can tailor your styles for devices with varying pixel densities, ensuring that your website looks great on both standard and high-resolution screens.

💡 Syntax

The syntax for using @media resolution within a media query is as follows:

Syntax

Copied

@media resolution: resolution {
  /* CSS rules here */
}

Here, resolution can be specified using various units, such as dpi (dots per inch) or dppx (dots per pixel unit).

🏠 Property Values

dpi: Specifies the resolution in dots per inch. For example, 300dpi targets devices with 300 dots per inch.
dppx: Specifies the resolution in dots per pixel unit. For example, 1.5dppx targets devices with 1.5 dots per pixel unit.

🎛️ Default Value

The @media resolution property does not have a default value since it is used as part of a media query to target specific resolutions. If not specified, styles will apply regardless of the resolution.

📝 Example Usage

📜 Example 1: Targeting High-Resolution Displays

In this example, we'll apply a different background color to devices with a high resolution (e.g., Retina displays).

HTML

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

    @media resolution and (min-resolution: 192dpi) {
      body {
        background-color: lightblue;
      }
    }
  </style>
</head>
<body>
  <h1>High-Resolution Display Example</h1>
  <p>This background color changes based on the resolution of your device.</p>
</body>
</html>

📜 Example 2: Using dppx

In this example, we'll change the font size for devices with a high pixel density.

HTML

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 resolution Example</title>
  <style>
    p {
      font-size: 16px;
    }

    @media resolution and (min-resolution: 1.5dppx) {
      p {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <h1>High Pixel Density Example</h1>
  <p>This font size changes based on the pixel density of your device.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media resolution property is supported in most modern browsers. However, ensure that you test across different browsers and devices to verify compatibility and ensure a consistent user experience.

🎉 Conclusion

The @media resolution property is a valuable tool for creating responsive web designs that adapt to different screen resolutions.

By utilizing this property, you can optimize the appearance of your website for various devices, from standard displays to high-resolution screens. Experiment with different resolutions to ensure that your styles are applied effectively across all devices.