La oss se på den faktiske bruken av all @media-funksjonalitet.

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

<media_type>

Den vanligste verdien for medietype er screen, siden vi vanligvis lager nettsider for enheter med skjermer. La oss se hvordan dette brukes:

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

Med denne regelen informerer vi nettleseren om at hvis brukerens enhet har en skjerm og bredden er 768px eller mer, skal elementet med klassenavnet container ha egenskapen background-color satt til purple.

Vi angir skjermbredden som vi ønsker å sette noen css-regler for. 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 eksemplet informerer vi nettleseren om at for alle enheter med en skjermbredde mindre enn eller lik 1200px, skal egenskapen color med verdien aliceblue brukes på elementet med klassenavnet container.

I det andre eksemplet informerer vi nettleseren om at hvis skjermbredden på en enhet overstiger eller er lik 1680px, skal egenskapen color med verdien gainsboro brukes på elementet med klassenavnet container.

Operatorer er valgfrie, og de angis mellom medietype og mediefunksjon. and informerer nettleseren om at alle de oppgitte funksjonene må være oppfylt.

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

Denne regelen forteller nettleseren at elementet med klassenavnet link skal ha egenskapen text-decoration med verdien overline kun hvis brukeren har en enhet med skjerm OG skjermbredden er lik eller større enn 380px OG skjermbredden er lik eller mindre enn 840px.

Ved å bruke operatoren , kan vi angi en gruppe uttrykk der hvis noen av dem er oppfylt, vil en medieforespørsel bli utløst.

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

Med denne regelen har vi fortalt nettleseren at elementet med klassenavnet link skal ha egenskapen text-decoration med verdien overline hvis brukerens skjermbredde er større enn eller lik 960px ELLER brukerens skjermbredde er mindre enn eller lik 540px.