CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



@media

CSS is a powerful tool for designing web pages. It allows developers to create visually appealing and responsive websites. One of the most important features of CSS is the @media rule. This rule allows developers to create different styles for different devices and screen sizes. In this article, we will discuss the @media rule and how it can be used to create responsive web pages.

What is @media?

The @media rule is a CSS rule that allows developers to specify different styles for different devices and screen sizes. It is used to create responsive web pages that can adapt to different screen sizes and resolutions. The @media rule is used in conjunction with media queries, which are used to specify the conditions under which the styles should be applied.

The @media rule has the following syntax:

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

The media-type is optional and specifies the type of media for which the styles should be applied. The most common media types are screen, print, and all. The media-feature is also optional and specifies the condition under which the styles should be applied. The most common media features are width, height, and orientation.

Examples of @media

Let's take a look at some examples of how the @media rule can be used to create responsive web pages.

Example 1: Changing the Background Color

In this example, we will change the background color of a web page based on the screen size. We will use the @media rule to specify different background colors for screens that are less than 600 pixels wide and screens that are greater than or equal to 600 pixels wide.

<style>
  body {
    background-color: blue;
  }

  @media (min-width: 600px) {
    body {
      background-color: red;
    }
  }
</style>

In this example, the background color of the body element is set to blue by default. However, when the screen size is greater than or equal to 600 pixels, the background color is changed to red.

Example 2: Changing the Font Size

In this example, we will change the font size of a web page based on the screen size. We will use the @media rule to specify different font sizes for screens that are less than 600 pixels wide and screens that are greater than or equal to 600 pixels wide.

<style>
  body {
    font-size: 16px;
  }

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

In this example, the font size of the body element is set to 16 pixels by default. However, when the screen size is greater than or equal to 600 pixels, the font size is changed to 20 pixels.

Example 3: Changing the Layout

In this example, we will change the layout of a web page based on the screen size. We will use the @media rule to specify different styles for screens that are less than 600 pixels wide and screens that are greater than or equal to 600 pixels wide.

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    width: 100%;
  }

  @media (min-width: 600px) {
    .item {
      width: 50%;
    }
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

In this example, the container element is set to display as a flex container with wrap enabled. The item elements are set to have a width of 100% by default. However, when the screen size is greater than or equal to 600 pixels, the width of the item elements is changed to 50%.

Conclusion

The @media rule is a powerful tool for creating responsive web pages. It allows developers to specify different styles for different devices and screen sizes. By using the @media rule, developers can create web pages that look great on any device, whether it's a desktop computer, a tablet, or a smartphone.

References

Activity