Let's consider the real use of all @media functionality.

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

<media_type>

The most typical value of the media type is the screen, as generally, we create web pages for devices with screens. Let's consider how to use it:

@media screen and (min-width: 768px) {
  .container {
    background-color: purple;
  }
}

With the help of this rule, we told the browser that if the user device has a screen and its width is 768px or more, then the element with the container class name has the property background-color with the value of purple.

We specify the screen width for which we want to set some css rules. Let's consider the following examples:

/* 1st example */
@media screen and (max-width: 1200px) {
  .container {
    color: aliceblue;
  }
}

/* 2nd example */
@media screen and (min-width: 1680px) {
  .container {
    color: gainsboro;
  }
}

In the first example, we told the browser that for any devices with a screen width less than 1200px or equal to 1200px, apply the color property with the value aliceblue to the element with the class name container.

In the second example, we informed the browser that if the screen width of any device exceeds 1680px or equal to 1680px, the color property with the value gainsboro should be applied to the element with the container class name.

Operators are optional, and they are specified between media-type and media-feature. and lets the browser know that all the presented features must be satisfied.

@media screen and (min-width: 380px) and (max-width: 840px) {
  .link {
    text-decoration: overline;
  }
}

This rule tells the browser that the element with the class name link must have the text-decoration property with the overline value only if the user has a device with a screen AND the screen width is equal to or more than 380px AND the screen width is equal to or less than 840px.

By utilizing the , operator, we can indicate a group of expressions that, if any of them is met, will trigger the execution of a media query.

@media screen and (min-width: 960px), (max-width: 540px) {
  .link {
    text-decoration: overline;
  }
}

With the help of this rule, we told the browser that the element with the class name link must have the text-decoration property with the overline value if the user screen width is more than 960px or equal to 960px OR user screen width is less than 540px or equal to 540px.