Этап 4 из 19 · ≈ 6 ч

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

Основа с 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.

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

Junior ≈ 6 ч

  • Верстает mobile first с медиазапросами и гибкими сетками
  • Делает адаптивные картинки через srcset и sizes

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

Middle ≈ 4 ч

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

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

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как сделать адаптивную вёрстку?Junior

Гибкая раскладка (flex, grid с fr и minmax), относительные единицы (rem, %, vw, clamp), медиазапросы по ширине и адаптивные изображения (srcset, sizes). Mobile-first — базовые стили для узкого экрана, расширения через @media (min-width: ...).

Полный разбор
Какие единицы измерения есть в CSS и когда какие использовать?Junior

px — абсолютные пиксели; rem — от размера шрифта корня (html), em — от шрифта текущего элемента (вложенные em накапливаются); % — от размера родителя; vw/vh — проценты окна; clamp(min, предпочтительное, max) — плавное значение в границах. Шрифты и отступы…

Полный разбор
Чем Flexbox отличается от Grid и когда что использовать?Junior

Flexbox — одномерная раскладка: элементы в строку или столбец, распределение места и выравнивание вдоль оси; размеры идут от содержимого. Grid — двумерная: строки и столбцы одновременно, раскладка задаётся контейнером. Flex — панели, меню, ряды кнопок; Grid …

Полный разбор
Как оптимизировать изображения на сайте?Junior

Картинки — часто самая тяжёлая часть страницы. Приёмы: современные форматы (AVIF, WebP; SVG для иконок), размер под экран через srcset и sizes (телефону не нужна картинка 3000px), сжатие, loading="lazy" для картинок ниже первого экрана, width и height (или…

Полный разбор
Что такое блочная модель CSS и чем content-box отличается от border-box?Junior

Каждый элемент — прямоугольник из content, padding, border, margin. При content-box (по умолчанию) width задаёт только содержимое, а padding и border добавляются сверху. При border-box width включает padding и border — размеры предсказуемы, поэтому почти все…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования