Медиа-запросы работают следующим образом: они задают условие, при выполнении которого применяется определённый стиль. 2 Если условие выполняется, то стиль применяется, если нет — не применяется. 2

Основная структура медиа-запроса включает ключевое слово @media, за которым следуют условия, определяющие, когда применять заданные стили. 1 Эти условия могут включать тип устройства (например, screen для экранов), логические операторы (and, not, only) и медиа-функции, такие как width, height, orientation. 1

Пример базового использования медиа-запросов: если ширина экрана устройства не превышает 600 пикселей (что типично для мобильных телефонов), то размер шрифта на странице уменьшится до 14 пикселей, фоновый цвет изменится на lightcoral, а изображения будут занимать всю ширину экрана (100%). 1