Урок 32. Задания: Адаптивная, резиновая и отзывчивая вёрстка

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#max-width #min #width #clamp #margin-inline

⚡ Кратко

Объясни 4 типа вёрстки своими словами; собери резиновый контейнер с пределом и сетку карточек на auto-fit; найди в DevTools, где ломается контент, и поставь брейкпоинт там.

Задания

  1. Разбор: объясните своими словами разницу между fixed, fluid, adaptive и responsive вёрсткой — что происходит с шириной блока при сужении окна в каждом случае.
  2. Код: создайте контейнер, который тянется до 72rem, а дальше фиксируется и центрируется. Внутри — сетка карточек, которая сама переходит с нескольких колонок в одну при сужении (без media queries).
  3. Проверка: откройте DevTools, проверьте 320px, 768px и 1200px, найдите момент, где контенту становится тесно, и запишите этот breakpoint рядом с CSS-правилом.

Ожидаемый визуальный результат

Карточки в широком окне стоят в ряд, в узком — складываются в столбец; контейнер не выходит за края экрана.

Широкое окно Узкое окно
Цель: ряд → столбец без горизонтального скролла

Навигация