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

Они работают как условные операторы: если устройство соответствует заданным параметрам, применяются определённые стили. 1 Например, можно задать различные стили для экранов с шириной менее 768px (типичные планшеты) или более 1200px (десктопы). 1

Также с помощью медиазапросов можно настроить стили для ориентации экрана (портретной или альбомной) и плотности пикселей дисплея (например, для Retina-экранов). 2

Для корректной работы адаптивного дизайна важен метатег viewport, который указывается в разделе HTML-документа. 2 Он помогает браузеру интерпретировать ширину экрана устройства и масштаб отображения страницы. 2