Что такое медиа-запрос

Медиа-запрос (Media Query) — это CSS-правило, которое позволяет применять стили в зависимости от характеристик устройства или области просмотра (viewport), таких как ширина экрана, ориентация, разрешение и др.

Пример:

/* Стили для экранов шириной до 768px */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* Стили для экранов в альбомной ориентации */
@media (orientation: landscape) {
  .sidebar {
    width: 30%;
  }
}

Используется в адаптивном дизайне для корректного отображения сайта на разных устройствах. Поддерживает логические операторы (and, not, only).