Некоторые способы создания адаптивного дизайна с помощью медиа-запросов:

• Настройка стилей для разных размеров экранов. 2 Например, для мобильных устройств или десктопов. 2 Для этого используются условия width, min-width, max-width для ширины и height, min-height, max-height для высоты. 3
• Определение ориентации экрана. 3 Для этого используется ключ orientation, значением которого может выступать одно из двух значений: landscape (условие выполнится для устройств с горизонтальной ориентацией экрана) и portrait (условие выполнится для устройств с вертикальной ориентацией экрана). 3
• Настройка плотности пикселей дисплея. 2 Например, для Retina-экранов. 2

Пример использования медиа-запросов: 4 если ширина экрана меньше или равна 768 пикселей, размер шрифта для заголовка будет изменён на 24px. 4

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