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

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

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

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