Адаптивная вёрстка

Основа с Junior

Один интерфейс для телефона, планшета и монитора — viewport, медиа- и контейнерные запросы, гибкие единицы.

<meta name="viewport" content="width=device-width, initial-scale=1">

Без этого тега телефон рисует страницу шириной 980 px и уменьшает её.

Mobile first: базовые стили для узкого экрана, расширения — через @media (min-width: …).
Гибкая раскладка: Grid с minmax и auto-fill, Flexbox с переносом — часто без единого медиазапроса.
Гибкая типографика: font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem).
Контейнерные запросы (@container) — компонент подстраивается под ширину своего контейнера, а не окна; удобно для переиспользуемых компонентов.
Картинки: max-width: 100%, srcset и sizes, <picture> для разных форматов.
Сенсорные цели не меньше 44×44 px, учёт hover: none на телефонах.
100vh на мобильных прыгает из-за панели браузера — 100dvh.

Критерии освоения

Практика. Сделать адаптивную версию страницы каталога для экранов 360, 768 и 1440 пикселей.

Использует контейнерные запросы для переиспользуемых компонентов
Учитывает сенсорный ввод, безопасные зоны и динамическую высоту окна на мобильных

Практика. Переделать карточку товара на контейнерные запросы так, чтобы она работала и в сетке, и в боковой панели.

Как сделать адаптивную вёрстку? Junior
Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые…

Закрытая бета

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.