CSS @media Rule

Posted in CSS Tutorial

Updated on Sep 30, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS is a powerful feature that allows you to apply styles based on the characteristics of the device or viewport displaying the content.

This is essential for creating responsive designs that adapt to various screen sizes and device types, ensuring a seamless user experience across different devices.

💡 Syntax

The syntax for the @media rule involves specifying a media query that defines the conditions under which the enclosed styles will be applied.

Syntax

Copied

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

Here, media-type is optional and specifies the type of media (like screen, print, etc.), and condition represents the feature and value you want to query (like width, height, etc.).

🎛️ Default Value

The @media rule does not have a default value, as it functions based on conditions you specify. If no media queries are applied, the default styles will be used.

🏠 Property Values

Value	Description
media-type	Defines the type of media (e.g., screen, print, all). This is optional.
condition	A media feature and value pair, such as max-width: 600px or orientation: landscape.

📄 Example

Example 1: Basic Usage

In this example, we'll apply different styles based on the viewport width. If the viewport width is 600px or less, the text color will change to red.

index.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 Rule Example</title>
  <style>
    body {
      color: black;
    }

    @media (max-width: 600px) {
      body {
        color: red;
      }
    }
  </style>
</head>
<body>
  <h1>Responsive Text Color</h1>
  <p>This text color changes based on viewport width.</p>
</body>
</html>

Example 2: Applying Styles for Print

In this example, we'll use a media query to apply specific styles when printing the page. The background color will change to white when printing.

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

    @media print {
      body {
        background-color: white;
      }
    }
  </style>
</head>
<body>
  <h1>Print Style Example</h1>
  <p>This background color changes for printing.</p>
</body>
</html>

Example 3: Landscape Orientation

In this example, we'll apply styles based on the orientation of the device. If the device is in landscape mode, the text color will change to blue.

index.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 Rule Example</title>
  <style>
    body {
      color: black;
    }

    @media (orientation: landscape) {
      body {
        color: blue;
      }
    }
  </style>
</head>
<body>
  <h1>Orientation-Based Text Color</h1>
  <p>This text color changes based on device orientation.</p>
</body>
</html>

🖥️ Browser Compatibility

The @media rule is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a fundamental part of CSS used for responsive design, so you can rely on its compatibility for creating adaptable web pages.

🎉 Conclusion

The @media rule is a crucial tool in responsive web design, allowing you to create styles that adapt to different screen sizes, orientations, and media types.

By leveraging media queries, you can ensure that your website provides an optimal user experience across various devices and conditions. Experiment with different media queries to see how they can enhance the responsiveness and usability of your web projects.