Media Queries

We can use media queries to make our web pages responsive in CSS. This is how we can create rules to make our layouts adapt to different device sizes. The @media property is what we can use to accomplish this. It executes code only if a certain condition is true.

Let’s take a look at an example. Suppose a user is browsing our web page on a mobile device, where the window width is 600px or smaller. Let’s set the background-color to orange:

@media only screen and (max-width: 600px) {
  body {
    background-color: orange;
  }
}

It’s as simple as that! This rule will execute for viewers using small devices.

Using media queries

We can use media queries to check for:

• The viewport’s width and height
• The device’s width and height
• The device’s screen orientation (landscape or portrait)
• The screen resolution

By checking this information, we can deliver a tailored experience for our web page visitors. We can create rules that display the ...