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

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

⚡ Кратко

Есть четыре типа вёрстки. Fixed — жёсткая ширина в пикселях (например, 960px): на узком экране появляется горизонтальный скролл. Fluid (резиновая) — ширина в процентах (width: 80%): блок тянется за окном. Adaptive (адаптивная) — несколько фиксированных раскладок, переключающихся скачком на брейкпоинтах. Responsive (отзывчивая) = fluid-основа + media queries: тянется плавно и перестраивается на ключевых ширинах.

  • Современный приём резиновости с пределом: max-width + width: 100% (или width: min(100% - 2rem, 72rem)).
  • Брейкпоинты ставят там, где ломается содержимое, а не «под телефон».
  • Сами media queries и брейкпоинты подробно — в уроке 33; здесь — обзор и сравнение типов.

Главная идея

«Вёрстка» под разные экраны — это не одна техника, а четыре разных подхода к тому, как блок реагирует на ширину окна. Разница между ними — в одном вопросе: что происходит с шириной, когда окно меняется?

  • Fixed (фиксированная) — ширина задана в пикселях и не меняется никогда. На экране уже макета — горизонтальный скролл, на экране шире — пустые поля по краям.
  • Fluid / резиновая (тянущаяся) — ширина в процентах от родителя или viewport. Блок «растекается» вместе с окном без скачков, но без верхнего предела строки становятся слишком длинными.
  • Adaptive (адаптивная) — заранее заготовлено несколько фиксированных раскладок (например, под 320, 768, 1200). Браузер выбирает подходящую по брейкпоинту и переключается скачком; между точками ширина не меняется.
  • Responsive (отзывчивая) — это fluid + media queries: гибкая основа тянется плавно, а на ключевых ширинах раскладка ещё и перестраивается. Самый используемый сегодня подход.

Картина в раме — это fixed: рама жёсткая, картина не растянется и не сожмётся, в маленькой комнате её придётся двигать (скролл). Вода в сосуде — это fluid: жидкость принимает форму любого сосуда, заполняя его целиком (но в огромном тазу она расплывётся тонким слоем — длинные строки). Трансформер — это responsive: он не просто меняет размер, а перестраивает форму под задачу — на узком экране колонки складываются в одну, меню прячется в «бургер».

Как четыре типа ведут себя при сужении окна

Одна и та же страница, окно сужается слева направо. Видно ключевую разницу: fixed «вылезает» за экран, fluid тянется, adaptive прыгает между состояниями, responsive тянется и перестраивается.

Широкое окно Узкое окно fixed 960px 960px → скролл fluid 80% 80% adaptive 3 колонки 1 (скачок) responsive гибко × 3 1, тянется fixed → ломается · fluid → тянется · adaptive → прыгает · responsive → тянется и перестраивается
Поведение четырёх типов вёрстки при изменении ширины окна

Как работает резиновость с пределом (современный приём)

Чистый fluid (width: 80%) на огромном мониторе делает строки нечитаемо длинными. Решение — совместить резиновость с верхним ограничением: блок тянется, пока не упрётся в предел, а дальше остаётся фиксированным и центрируется.

📄 lesson-32/styles.css
/* Классический способ: резиновый до 72rem, потом фиксированный */
.page {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;   /* центрируем, когда упёрлись в предел */
  padding-inline: 1rem;  /* поля, чтобы не липло к краям */
}

/* То же самое одной строкой через min() */
.page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
Читается так: min(100% - 2rem, 72rem) — «возьми меньшее из: вся доступная ширина минус поля, либо 72rem». На узком экране победит первое (резина), на широком — второе (предел).

Когда какой тип применять

  • Fixed — почти никогда для всей страницы. Уместен для мелких элементов с заведомо постоянным размером (иконка, аватар).
  • Fluid — основа любой современной страницы: проценты, fr, flex-wrap, auto-fit + minmax().
  • Adaptive — когда раскладки сильно различаются и плавный переход не нужен (например, отдельный «мобильный» и «десктопный» вид).
  • Responsive — рекомендуемый дефолт: fluid-основа + точечные media queries там, где контенту тесно.

Частая ошибка

Брейкпоинты «под устройства». Подбирать точки переключения под конкретные модели (iPhone, iPad) — путь в тупик: устройств бесконечно много. Правильно — менять ширину окна в DevTools и ставить брейкпоинт там, где ломается содержимое (текст слипся, карточка стала уже картинки). Тогда вёрстка работает на любом экране, а не на списке популярных.
⚠️ Проверить по документации: min(), max(), clamp() поддерживаются всеми современными браузерами, но в очень старых средах могут потребоваться запасные значения. Сверьтесь с MDN перед использованием в проде.

Навигация