**Media query **is used to make the webpage more responsive. It fires up when a certain set of conditions given by us become true.

Media query helps us to make a website which runs equally efficiently on mobile, tablet,laptop or a big screen computer.

How to use- just write the following code(for a div having id box1):

@media(max-width:300px){
    #box1{
        background-color: aqua;
    }
}

Matching value ranges

Many of the media features outlined in the previous section — including width, height, color and color-index — can be prefixed with min- or max- to express minimum or maximum constraints. The point is that we can create a range of value to match instead of having to declare specific values.

In the following snippet, we’re painting the body’s background purple when the viewport width is wider than 30em and narrower than 80em. If the viewport width does not match that range of values, then it will fallback to white.

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}