Betrachten wir die praktische Anwendung der gesamten @media-Funktionalität.

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

<media_type>

Der typischste Wert für den Medientyp ist screen, da Webseiten in der Regel für Geräte mit Bildschirmen erstellt werden. Sehen wir uns die Verwendung an:

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

Mit dieser Regel wird dem Browser mitgeteilt, dass, wenn das Benutzergerät einen Bildschirm hat und dessen Breite mindestens 768px beträgt, das Element mit dem Klassennamen container die Eigenschaft background-color mit dem Wert purple erhält.

Hier wird die Bildschirmbreite angegeben, für die bestimmte CSS-Regeln festgelegt werden sollen. Nachfolgend einige Beispiele:

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

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

Im ersten Beispiel wird dem Browser mitgeteilt, dass bei allen Geräten mit einer Bildschirmbreite von maximal 1200px die Eigenschaft color mit dem Wert aliceblue auf das Element mit dem Klassennamen container angewendet werden soll.

Im zweiten Beispiel wird dem Browser mitgeteilt, dass, wenn die Bildschirmbreite eines Geräts mindestens 1680px beträgt, die Eigenschaft color mit dem Wert gainsboro auf das Element mit dem Klassennamen container angewendet werden soll.

Operatoren sind optional und werden zwischen Medientyp und Media-Feature angegeben. and gibt dem Browser an, dass alle angegebenen Bedingungen erfüllt sein müssen.

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

Diese Regel weist den Browser an, dass das Element mit dem Klassennamen link die Eigenschaft text-decoration mit dem Wert overline nur dann erhalten soll, wenn der Nutzer ein Gerät mit Bildschirm UND einer Bildschirmbreite von mindestens 380px UND einer Bildschirmbreite von höchstens 840px verwendet.

Durch die Verwendung des ,-Operators können wir eine Gruppe von Ausdrücken angeben, bei denen das Eintreten einer beliebigen Bedingung die Ausführung einer Media Query auslöst.

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

Mit dieser Regel teilen wir dem Browser mit, dass das Element mit dem Klassennamen link die Eigenschaft text-decoration mit dem Wert overline erhalten soll, wenn die Bildschirmbreite des Nutzers mehr als 960px oder gleich 960px ODER die Bildschirmbreite weniger als 540px oder gleich 540px beträgt.