Адаптивная компоновка страницы
Добавим адаптивные правила страницы и выберем условия по содержимому, а не по списку моделей устройств.
Сетка уже сама меняет число колонок по доступной ширине. Однако адаптивность не заканчивается колонками. Длинный главный заголовок, вводный текст и шапка тоже требуют внимания. На узком окне бренд и навигация могут переноситься, но удобнее заранее изменить их отношение на вертикальное. При этом данные, порядок ссылок и структура разделов должны сохраняться.
В этом уроке разделим два механизма. Гибкие размеры реагируют непрерывно, например заголовок постепенно увеличивается вместе с окном. Медиазапрос выбирает набор объявлений при конкретном условии. Не нужно создавать десятки порогов, если один плавный размер и одно структурное изменение дают понятный результат. Но также не следует пытаться выразить любую перестройку только уменьшением букв.
Гибкий размер заголовка
Добавьте в таблицу стилей следующий фрагмент:
.layout-lab .lab-title {
font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
line-height: 1.15;
}
.layout-lab .lab-intro {
max-inline-size: 65ch;
}Ожидается, что главный заголовок будет расти в некотором диапазоне ширины, но не станет меньше нижней границы и больше верхней. Средняя часть задаёт предпочтительный размер, а крайние значения ограничивают его. vw связан с шириной viewport, rem — с размером корня. Сочетание не отменяет необходимости вручную проверить увеличение текста: формула сама по себе не доказывает доступность.
65ch ограничивает вводную область приблизительно через ширину символа ноль текущего шрифта. Это не обещание ровно шестидесяти пяти русских букв в строке. Разные знаки имеют разную ширину, а выбранный системный шрифт зависит от окружения. Мы используем единицу как ориентир для текстового блока, не как точный счётчик символов.
Главный заголовок всё ещё может переноситься. Не добавляйте white-space: nowrap, чтобы сохранить красивую одну строку на широком снимке. На узком окне такой запрет способен расширить всю страницу. У адаптивного решения должна быть предусмотрена реакция на недостаток места: перенос, изменение компоновки или другой оправданный вариант. Скрытие содержимого не является единственным возможным ответом.
Условие для шапки
Добавьте медиазапрос после прежних правил Flexbox:
@media (max-width: 42rem) {
.layout-lab .lab-header-row {
align-items: start;
flex-direction: column;
}
.layout-lab .lab-main {
padding-block: 1.5rem;
}
}Если условие совпадает, бренд и навигация ожидаемо становятся отдельными строками внешнего flex-контейнера. Сам nav сохраняет свой внутренний Flexbox и перенос ссылок. Уменьшаются вертикальные поля основной области. В широком состоянии продолжают действовать первоначальные объявления: медиазапрос не создаёт новый документ и не удаляет старые правила.
Условие основано на ширине viewport. Его синтаксис и возможности описаны в MDN. В нашем примере порог сорок два rem выбран как учебная точка изменения шапки. Перед выпуском его нужно сопоставить с реальным содержимым. Это не измеренный универсальный размер телефона или планшета.
Порог в медиазапросе с относительной единицей имеет свои правила вычисления и не стоит без проверки приравнивать его к текущему размеру rem любого элемента страницы. Если автор меняет корневой шрифт через CSS, это не означает, что условие автоматически повторяет тот же расчёт. В нашем проекте корневой размер специально не переопределён; мы сохраняем исходные настройки окружения.
Когда правило выбирает весь документ
Медиазапрос видит окружающий viewport, а не ширину конкретной карточки. В широком окне карточка может быть узкой из-за трёх колонок, но условие страницы всё равно относится к широкому состоянию. Именно поэтому позже рассмотрим запрос контейнера. Он позволит компоненту реагировать на собственное доступное место без предположения, что ширина окна всегда совпадает с шириной записи.
Сейчас медиазапрос подходит шапке: она относится ко всей странице и меняет отношение между брендом и общей навигацией. Главная сетка уже устроена гибко, поэтому не нужно дублировать для неё отдельные правила «одна колонка на телефоне, две на планшете, три на компьютере». Мы описали ограничение дорожки, и браузер распределяет их по доступному месту.
Не привязывайте классы к названиям устройств. Класс mobile-header создаёт впечатление, будто выбран конкретный аппарат, хотя на большом экране браузер тоже можно сделать узким. Название lab-header-row выражает роль компонента, а условие описывает доступную среду. Это сохраняет смысл исходника при изменении окна и использовании сайта в разных режимах.
Проверка на неудобном содержимом
Для ручного наблюдения постепенно изменяйте ширину окна, а не смотрите только две крайние точки. В промежуточном состоянии можно обнаружить узкую полосу, где бренд уже тесен, но порог ещё не выбран. Тогда меняют условие или гибкость самой группы. Цель состоит не в том, чтобы попасть в популярный размер экрана, а в том, чтобы каждая переходная ситуация была объяснима.
Увеличьте текст и временно сделайте название первого курса длиннее. Карточки должны расширяться по высоте, обложки — сохранять ширину в рамках ячейки, навигация — переноситься. Если возникают наложения, проверьте фиксированные размеры и запреты переноса. Ни одно из новых правил не требует абсолютного позиционирования или скрытого текста.
Отдельно сравните увеличение страницы браузером и изменение только шрифта. Они могут менять доступное пространство по-разному. Не следует объявлять интерфейс проверенным при четырёхкратном увеличении на основании одной формулы clamp. Подробные сценарии такого аудита есть в уроке о масштабировании и перестроении. Здесь описаны ожидаемые реакции нашего макета; реальные наблюдения нужно записать после открытия.
В первом документе уже есть viewport с шириной устройства и начальным масштабом. Не добавляйте запрет увеличения ради сохранения красивого макета. Если увеличение ломает страницу, задача состоит в исправлении размеров и переполнения. Ограничение управления масштабом переносит проблему на читателя, которому может требоваться крупный текст.
Также не уменьшайте весь текст на узком экране до произвольного маленького размера. Карточки имеют право занять больше высоты, а навигация — следующую строку. Адаптивное правило распределяет пространство, а не обязано сохранять высоту широкого варианта любой ценой.
Не ограничивайтесь изменением ориентации телефона. Узкое место может возникнуть в боковой панели большого приложения, в разделённом окне или после увеличения масштаба. Все эти условия показывают, почему адаптивный макет описывают через доступное пространство. Наши данные не знают модели устройства. Одни и те же курсы должны сохранять содержание при любом обычном способе размещения документа. Если новая среда требует другой задачи, её оформляют отдельным условием и проверяют, а не предполагают, что существующий порог покрывает всё.
Для самостоятельной работы уменьшите порог и найдите ширину, при которой шапка становится неудобной. Затем верните исходное значение или обоснуйте новое через содержание. Каталог теперь реагирует и плавными размерами, и одним структурным условием. В следующем уроке вынесем повторяющиеся цвета и промежуток сетки в пользовательские свойства, чтобы менять систему значений в одном понятном месте.