Tutorials

CSS @media update 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 CSS @media rule is used to apply styles to different devices and screen sizes, enabling responsive design.

This rule allows developers to set breakpoints and specify what CSS should be applied based on the characteristics of the user’s device, such as screen width, height, orientation, and resolution. The @media rule plays a key role in creating flexible layouts that adapt to varying screen sizes.

💡 Syntax

The syntax for the @media rule is as follows:

Syntax

Copied

@media media-type and (media-feature) {
  /* CSS rules here */
}

media-type: Specifies the type of device (e.g., screen, print, etc.).
media-feature: Defines the condition under which the style will be applied (e.g., max-width, min-width, etc.).

🏠 Property Values

media-type: This can be any device, such as:
- screen: (default for most cases)
- print: (for print styles)
- all: (applies to all media types)
media-feature: This defines the features of the device, such as:
- min-width: Minimum width of the screen.
- max-width: Maximum width of the screen.
- orientation: The orientation of the device (portrait or landscape).
- resolution: Specifies the screen resolution.

🎛️ Default Value

There is no default value for the @media rule itself, as it is a conditional rule that applies different CSS based on the conditions provided.

📝 Example Usage

📜 Basic Usage

Here is a simple example that changes the background color of the body based on the width of the screen:

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 Example</title>
  <style>
    body {
      background-color: lightblue;
    }
    
    @media screen and (max-width: 600px) {
      body {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <h1>Resize the window to see the effect!</h1>
  <p>The background color will change when the screen width is less than 600px.</p>
</body>
</html>

In this example, the background color of the page changes to light green if the screen width is less than or equal to 600px.

🖥️ Browser Compatibility

The @media rule is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a fundamental part of responsive design and works across all platforms. However, as always, it is recommended to test your design across different devices to ensure a smooth user experience.

🎉 Conclusion

The CSS @media rule is an essential tool for responsive web design. It allows developers to apply styles based on various device characteristics, ensuring that websites are adaptable and provide an optimal user experience on different screens.

By utilizing @media, you can create designs that look great on both small mobile screens and large desktop monitors.