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

Responsive design

Multi device adaptive design

Отзывчивый дизайн — это способ создания сайтов, которые одинаково удобно выглядят и работают на любых устройствах: от смартфонов до широких мониторов.

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

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

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

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

  • Блоки перестраиваются по вертикали
  • Изображение уменьшается, сохраняя пропорции
Блок 1
A cat at the computer responsive image
Блок 3

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

DevTools toggle device toolbar

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

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

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

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

Открой доступ, чтобы заниматься без ограничений.

Полный доступ ко всем практическим задачам
Проверка ответов
Неограниченное количество попыток
Sidebar arrow

ВВЕДЕНИЕ

БАЗОВЫЕ ЗНАНИЯ

УРОВНИ ТЕСТИРОВАНИЯ

UI ТЕСТИРОВАНИЕ

ТЕХНИКИ ТЕСТ ДИЗАЙНА

ТЕСТОВАЯ ДОКУМЕНТАЦИЯ

АУТЕНТИФИКАЦИЯ И АВТОРИЗАЦИЯ

POSTMAN

БАЗЫ ДАННЫХ

ТЕСТИРОВАНИЕ РЕЛИЗА

АНАЛИЗ РАБОТЫ ПРИЛОЖЕНИЯ

ПОДГОТОВКА К СОБЕСЕДОВАНИЮ

Как составить резюме Топ вопросов Тест Собеседование