Vamos analisar o uso real de toda a funcionalidade do @media.

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

<media_type>

O valor mais comum para o tipo de mídia é screen, pois geralmente criamos páginas web para dispositivos com telas. Veja como utilizá-lo:

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

Com esta regra, informamos ao navegador que, se o dispositivo do usuário possuir uma tela e sua largura for igual ou superior a 768px, o elemento com a classe container terá a propriedade background-color com o valor purple.

Especifica-se a largura da tela para a qual se deseja definir determinadas regras CSS. Veja os exemplos a seguir:

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

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

No primeiro exemplo, informamos ao navegador que, para qualquer dispositivo com largura de tela menor ou igual a 1200px, deve-se aplicar a propriedade color com o valor aliceblue ao elemento com a classe container.

No segundo exemplo, informamos ao navegador que, se a largura da tela de qualquer dispositivo for maior ou igual a 1680px, a propriedade color com o valor gainsboro deve ser aplicada ao elemento com a classe container.

Operadores são opcionais e são especificados entre o tipo de mídia e a característica de mídia. and informa ao navegador que todas as características apresentadas devem ser satisfeitas.

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

Essa regra informa ao navegador que o elemento com o nome de classe link deve ter a propriedade text-decoration com o valor overline somente se o usuário estiver em um dispositivo com tela E a largura da tela for igual ou maior que 380px E a largura da tela for igual ou menor que 840px.

Ao utilizar o operador ,, podemos indicar um grupo de expressões em que, se qualquer uma delas for satisfeita, a media query será executada.

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

Com essa regra, informamos ao navegador que o elemento com o nome de classe link deve ter a propriedade text-decoration com o valor overline se a largura da tela do usuário for maior ou igual a 960px OU se a largura da tela do usuário for menor ou igual a 540px.