CSS @media screen Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS is used for applying styles based on specific conditions, such as screen size, device type, or resolution.

The @media screen property is a specific media query that targets devices with screens, like desktops, tablets, and smartphones. It allows developers to create responsive designs by applying different styles depending on the characteristics of the device's display.

💡 Syntax

The basic syntax for the @media screen property is:

Syntax

Copied

@media screen and (condition) {
  /* CSS rules */
}

screen: Specifies that the styles within the query should only apply to devices with a screen, such as computers and mobile devices.
condition: Defines the media features, such as screen width or orientation, that must be true for the styles to be applied.

🏠 Property Values

The @media screen property can be combined with various media features to target specific devices and screen conditions:

min-width: Sets a minimum width for the screen.
max-width: Sets a maximum width for the screen.
orientation: Targets the device's screen orientation (portrait or landscape).
resolution: Targets devices based on screen resolution (dpi).

🎛️ Default Value

There is no default value for @media queries. They are optional rules that developers use to create conditional styles based on specific criteria.

📝 Example Usage

📜 Basic Usage

In this example, the styles within the @media screen rule will only apply to screens with a width of 600px or less. This is useful for mobile-first designs.

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

    @media screen and (max-width: 600px) {
      body {
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <h1>Responsive Design Example</h1>
  <p>Resize the browser window to see the background color change based on screen size.</p>
</body>
</html>

In this example:

For screens wider than 600px, the background color is light blue.
For screens 600px or narrower, the background color changes to light coral.

🖥️ Browser Compatibility

The @media screen property is fully supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This ensures consistent behavior across different platforms and devices.

🎉 Conclusion

The @media screen property is an essential tool for creating responsive designs that adapt to different screen sizes and devices.

By using media queries effectively, developers can ensure that their websites are accessible and visually appealing on desktops, tablets, and smartphones. Experiment with different media features and conditions to create flexible layouts that respond to the needs of your users.