Розглянемо реальне використання всієї функціональності @media.

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

<media_type>

Найтиповішим значенням типу медіа є screen, оскільки зазвичай ми створюємо вебсторінки для пристроїв з екранами. Розглянемо, як це використовувати:

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

За допомогою цього правила ми повідомляємо браузеру, що якщо пристрій користувача має екран і його ширина становить 768px або більше, то елемент із класом container матиме властивість background-color зі значенням purple.

Вказуємо ширину екрана, для якої хочемо задати певні css правила. Розглянемо наступні приклади:

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

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

У першому прикладі ми повідомляємо браузеру, що для будь-яких пристроїв із шириною екрана меншою або рівною 1200px, до елемента з класом color застосовується властивість aliceblue зі значенням container.

У другому прикладі ми інформуємо браузер, що якщо ширина екрана будь-якого пристрою перевищує або дорівнює 1680px, до елемента з класом color застосовується властивість gainsboro зі значенням container.

Оператори є необов'язковими та вказуються між типом медіа та медіа-фічею. and повідомляє браузеру, що всі зазначені умови мають бути виконані.

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

Це правило повідомляє браузеру, що елемент із класом link повинен мати властивість text-decoration зі значенням overline лише якщо користувач має пристрій із екраном ТА ширина екрана дорівнює або перевищує 380px ТА ширина екрана дорівнює або менша за 840px.

Використовуючи оператор ,, можна вказати групу виразів, при виконанні будь-якого з яких буде застосовано медіа-запит.

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

За допомогою цього правила браузеру повідомляється, що елемент із класом link повинен мати властивість text-decoration зі значенням overline, якщо ширина екрана користувача перевищує або дорівнює 960px АБО ширина екрана менша або дорівнює 540px.