Consideriamo l'utilizzo reale di tutte le funzionalità di @media.

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

<media_type>

Il valore più tipico del tipo di media è screen, poiché generalmente creiamo pagine web per dispositivi con schermi. Vediamo come utilizzarlo:

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

Con questa regola, indichiamo al browser che se il dispositivo dell'utente dispone di uno schermo e la sua larghezza è pari o superiore a 768px, l'elemento con la classe container avrà la proprietà background-color impostata su purple.

Specifichiamo la larghezza dello schermo per cui vogliamo impostare alcune regole css. Vediamo i seguenti esempi:

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

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

Nel primo esempio, indichiamo al browser che per qualsiasi dispositivo con una larghezza dello schermo inferiore o uguale a 1200px, applicare la proprietà color con valore aliceblue all'elemento con la classe container.

Nel secondo esempio, informiamo il browser che se la larghezza dello schermo di un dispositivo supera o è uguale a 1680px, la proprietà color con valore gainsboro deve essere applicata all'elemento con la classe container.

Gli operatori sono opzionali e vengono specificati tra il tipo di media e la caratteristica del media. and indica al browser che tutte le caratteristiche presentate devono essere soddisfatte.

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

Questa regola comunica al browser che l'elemento con il nome di classe link deve avere la proprietà text-decoration con il valore overline solo se l'utente dispone di un dispositivo con uno schermo E la larghezza dello schermo è uguale o superiore a 380px E la larghezza dello schermo è uguale o inferiore a 840px.

Utilizzando l'operatore ,, è possibile indicare un gruppo di espressioni che, se almeno una di esse è soddisfatta, attiverà l'esecuzione di una media query.

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

Con questa regola, abbiamo comunicato al browser che l'elemento con il nome di classe link deve avere la proprietà text-decoration con il valore overline se la larghezza dello schermo dell'utente è superiore o uguale a 960px OPPURE la larghezza dello schermo dell'utente è inferiore o uguale a 540px.