Laten we het daadwerkelijke gebruik van alle @media functionaliteit bekijken.

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

<media_type>

De meest voorkomende waarde voor het mediatype is screen, aangezien webpagina's doorgaans worden gemaakt voor apparaten met een scherm. Zie het volgende gebruik:

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

Met deze regel wordt aan de browser aangegeven dat als het apparaat van de gebruiker een scherm heeft en de breedte is 768px of meer, het element met de klasse container de eigenschap background-color met de waarde purple krijgt.

Hier wordt de schermbreedte gespecificeerd waarvoor bepaalde css-regels moeten gelden. Zie de volgende voorbeelden:

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

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

In het eerste voorbeeld wordt aan de browser aangegeven dat voor elk apparaat met een schermbreedte kleiner dan of gelijk aan 1200px, de eigenschap color met de waarde aliceblue moet worden toegepast op het element met de klasse container.

In het tweede voorbeeld wordt aan de browser aangegeven dat als de schermbreedte van een apparaat groter is dan of gelijk aan 1680px, de eigenschap color met de waarde gainsboro moet worden toegepast op het element met de klasse container.

Operatoren zijn optioneel en worden gespecificeerd tussen media-type en media-feature. and geeft aan de browser door dat aan alle opgegeven kenmerken voldaan moet worden.

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

Deze regel geeft aan de browser door dat het element met de classnaam link de eigenschap text-decoration met de waarde overline alleen moet hebben als de gebruiker een apparaat met een scherm heeft EN de schermbreedte gelijk is aan of groter is dan 380px EN de schermbreedte gelijk is aan of kleiner is dan 840px.

Door gebruik te maken van de , operator kunnen we een groep expressies aangeven waarvan, als aan één van hen wordt voldaan, de media query wordt uitgevoerd.

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

Met behulp van deze regel geven we aan de browser door dat het element met de classnaam link de eigenschap text-decoration met de waarde overline moet hebben als de schermbreedte van de gebruiker meer dan 960px of gelijk aan 960px OF de schermbreedte van de gebruiker minder dan 540px of gelijk aan 540px is.