Lad os se på den praktiske anvendelse af al @media funktionalitet.

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

<media_type>

Den mest almindelige værdi for medietypen er screen, da vi generelt opretter websider til enheder med skærme. Lad os se, hvordan det bruges:

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

Med denne regel angiver vi til browseren, at hvis brugerens enhed har en skærm og dens bredde er 768px eller mere, så skal elementet med klassenavnet container have egenskaben background-color med værdien purple.

Her angives skærmbredden, hvor der ønskes at anvende specifikke css-regler. Se følgende eksempler:

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

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

I det første eksempel angiver vi til browseren, at for alle enheder med en skærmbredde mindre end eller lig med 1200px, skal egenskaben color med værdien aliceblue anvendes på elementet med klassenavnet container.

I det andet eksempel informerer vi browseren om, at hvis skærmbredden på en enhed overstiger eller er lig med 1680px, skal egenskaben color med værdien gainsboro anvendes på elementet med klassenavnet container.

Operatorer er valgfrie og angives mellem medietype og mediefunktion. and informerer browseren om, at alle de angivne funktioner skal være opfyldt.

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

Denne regel angiver for browseren, at elementet med klassenavnet link skal have egenskaben text-decoration med værdien overline kun hvis brugeren har en enhed med en skærm OG skærmbredden er lig med eller større end 380px OG skærmbredden er lig med eller mindre end 840px.

Ved at anvende operatoren , kan vi angive en gruppe af udtryk, hvor opfyldelse af et hvilket som helst af dem vil udløse en medieforespørgsel.

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

Med denne regel har vi angivet for browseren, at elementet med klassenavnet link skal have egenskaben text-decoration med værdien overline, hvis brugerens skærmbredde er større end eller lig med 960px ELLER brugerens skærmbredde er mindre end eller lig med 540px.