Отзывчивый дизайн

Responsive design

Отзывчивый дизайн — это подход, при котором веб-сайт разрабатывается так, чтобы автоматически подстраиваться под разные экраны устройств.

Отзывчивость достигается за счет использования гибких макетов, сеток и медиа запросов (media queries) в CSS.

Элементы интерфейса меняют размеры и расположение в зависимости от параметров экрана.

Пример отзывчивого дизайна

В качестве простого примера отзывчивого дизайна обратите внимание как перестраиваются блоки при уменьшении размера окна:

Блоки перестраиваются по вертикали
Изображение уменьшается, сохраняя пропорции

Блок 1

Блок 3

Отзывчивость и адаптивность с DevTools

DevTools toggle device toolbar

Функция переключения устройств в DevTools позволяет протестировать отзывчивость и адаптацию верстки под разные типы и размеры устройств — от мобильных телефонов до широкоформатных экранов.

Откройте DevTools F12
Нажмите на значок устройств слева от Elements или используйте горячие клавиши:
- Windows/Linux — Ctrl + Shift + M
- macOS — Cmd+ Shift + M
Выберите устройство из списка Dimensions или укажите свое разрешение, используя опцию "Responsive"

Чек-лист проверок при тестировании адаптивности верстки

Выбор устройства: элементы интерфейса корректно отображаются на устройствах разных типов и размеров экрана.
Поворот устройства: верстка адаптируется при смене ориентации устройства (портрет/ландшафт).
Для смены ориентации устройства в DevTools нажмите на иконку с двумя стрелками.
Проверка шрифтов и изображений: шрифты и изображения масштабируются в зависимости от размеров экрана.
Проверка элементов навигации: мобильное меню "гамбургер" корректно отображается и функционирует.
Проверка интерактивных элементов: кнопки, формы и другие элементы работают корректно на разных устройствах.

Задача