Consideremos el uso real de toda la funcionalidad de @media.

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

<media_type>

El valor más común del tipo de medio es screen, ya que generalmente se crean páginas web para dispositivos con pantallas. Veamos cómo utilizarlo:

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

Con esta regla, se indica al navegador que si el dispositivo del usuario tiene una pantalla y su ancho es de 768px o más, entonces el elemento con la clase container tendrá la propiedad background-color con el valor purple.

Se especifica el ancho de pantalla para el cual se desean establecer ciertas reglas CSS. Considere los siguientes ejemplos:

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

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

En el primer ejemplo, se indica al navegador que para cualquier dispositivo con un ancho de pantalla menor o igual a 1200px, se aplique la propiedad color con el valor aliceblue al elemento con la clase container.

En el segundo ejemplo, se informa al navegador que si el ancho de pantalla de cualquier dispositivo supera o es igual a 1680px, la propiedad color con el valor gainsboro debe aplicarse al elemento con la clase container.

Los operadores son opcionales y se especifican entre el tipo de medio y la característica de medio. and indica al navegador que todas las características presentadas deben cumplirse.

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

Esta regla indica al navegador que el elemento con el nombre de clase link debe tener la propiedad text-decoration con el valor overline solo si el usuario tiene un dispositivo con pantalla Y el ancho de la pantalla es igual o mayor a 380px Y el ancho de la pantalla es igual o menor a 840px.

Al utilizar el operador ,, podemos indicar un grupo de expresiones que, si alguna de ellas se cumple, activarán la ejecución de una consulta de medios.

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

Con la ayuda de esta regla, indicamos al navegador que el elemento con el nombre de clase link debe tener la propiedad text-decoration con el valor overline si el ancho de la pantalla del usuario es mayor o igual a 960px O el ancho de la pantalla del usuario es menor o igual a 540px.