Tarkastellaan kaikkien @media-toimintojen todellista käyttöä.

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

<media_type>

Tyypillisin media-tyypin arvo on screen, sillä yleensä verkkosivut tehdään näyttölaitteille. Tarkastellaan sen käyttöä:

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

Tämän säännön avulla kerrotaan selaimelle, että jos käyttäjän laitteessa on näyttö ja sen leveys on vähintään 768px, niin container-luokan elementillä on background-color-ominaisuus arvolla purple.

Määritetään näytön leveys, jolle halutaan asettaa CSS-sääntöjä. Tarkastellaan seuraavia esimerkkejä:

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

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

Ensimmäisessä esimerkissä kerrotaan selaimelle, että kaikilla laitteilla, joiden näytön leveys on enintään 1200px, sovelletaan color-ominaisuutta arvolla aliceblue container-luokan elementtiin.

Toisessa esimerkissä ilmoitetaan selaimelle, että jos minkä tahansa laitteen näytön leveys ylittää 1680px tai on täsmälleen 1680px, color-ominaisuus arvolla gainsboro tulee soveltaa container-luokan elementtiin.

Operaattorit ovat valinnaisia, ja ne määritellään media-tyypin ja media-ominaisuuden väliin. and ilmoittaa selaimelle, että kaikkien esitettyjen ominaisuuksien on täytyttävä.

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

Tämä sääntö kertoo selaimelle, että elementillä, jonka luokan nimi on link, tulee olla text-decoration-ominaisuus arvolla overline vain, jos käyttäjällä on laite, jossa on näyttö JA näytön leveys on vähintään 380px JA näytön leveys on enintään 840px.

Käyttämällä ,-operaattoria voimme määrittää joukon lausekkeita, joista minkä tahansa täyttyminen laukaisee media queryn suorittamisen.

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

Tämän säännön avulla kerroimme selaimelle, että elementillä, jonka luokan nimi on link, tulee olla text-decoration-ominaisuus arvolla overline, jos käyttäjän näytön leveys on yli 960px tai yhtä suuri kuin 960px TAI käyttäjän näytön leveys on alle 540px tai yhtä suuri kuin 540px.