Медиа-запросы в CSS — это инструмент для создания адаптивного дизайна веб-страницы. Они позволяют настраивать стили для разных устройств и экранов в зависимости от их размеров, разрешения и других параметров. В CSS3 медиа-запросы были добавлены для поддержки мобильных и планшетных устройств.

Синтаксис медиа-запроса начинается с ключевого слова @media, за которым следует условие, задающее определенные характеристики устройства. Затем идут стили, которые применяются, если условие медиа-запроса соответствует устройству.

Пример медиа-запроса, который применяет стили для устройств с шириной экрана меньше 768 пикселей:

@media (max-width: 767px) {
  /* стили для мобильных устройств */
}

Медиа-запросы позволяют создавать адаптивный дизайн, позволяя странице адаптироваться к различным устройствам и размерам экранов. Некоторые характеристики устройств, которые могут использоваться в медиа-запросах, включают в себя ширину и высоту экрана, разрешение экрана, ориентацию экрана и многое другое.