CSS @media width Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 13 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS is used to apply styles depending on the media type or specific conditions, such as the width of the viewport.

The width property within a @media query allows developers to create responsive designs that adapt to different screen sizes, providing an optimal viewing experience across devices such as desktops, tablets, and smartphones.

💡 Syntax

The @media width query is typically written as follows:

Syntax

Copied

@media (min-width: width) {
  /* CSS rules here */
}

@media (max-width: width) {
  /* CSS rules here */
}

min-width: Targets devices with a width greater than or equal to the specified value.
max-width: Targets devices with a width less than or equal to the specified value.

The width value can be defined in units such as px, em, or rem.

🏠 Property Values

min-width: Specifies a minimum viewport width, ensuring styles are applied when the screen width is greater than or equal to the specified value.
max-width: Specifies a maximum viewport width, ensuring styles are applied when the screen width is less than or equal to the specified value.

🎛️ Default Value

There is no default value for the @media rule since it is condition-based. The styles are applied only when the specified width conditions are met.

📝 Example Usage

📜 Basic Usage: Responsive Text Size

In this example, the font size changes based on the width of the viewport. If the viewport is wider than 600px, the text becomes larger.

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

    @media (min-width: 600px) {
      body {
        font-size: 20px;
      }
    }

    @media (max-width: 600px) {
      body {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <h1>Resize the browser window to see the effect!</h1>
  <p>The text size will adjust based on the screen width.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media rule with the width property is fully supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is widely used in responsive web design and works consistently across all devices.

🎉 Conclusion

The @media rule with the width property is essential for building responsive websites that look great on different screen sizes.

By using the min-width and max-width properties, you can target specific viewport ranges and apply customized styles. This technique is crucial for ensuring that your website is both flexible and user-friendly, regardless of the device your visitors use.