Адаптация сложной статьи

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

В этом уроке вы согласуете уже разработанные компоненты reading-lab для разных размеров окна. Продолжайте состояние четырнадцатого урока. Мы добавим небольшой слой правил и подготовим условия будущего просмотра, не создавая отдельную мобильную копию статьи.

Изменяется композиция, а не материал

Узкая страница не должна терять последний столбец таблицы или вторую часть листинга. Эти элементы остаются доступными в своих областях. Обычная проза переносится, а технические последовательности получают ранее выбранное поведение. Поэтому главный вопрос — где возникает переполнение и сохраняется ли возможность прочитать весь объект.

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

Содержимое также может изменять требования. Название из пяти слов и название из двенадцати проверяют разные ситуации. Таблица из двух коротких строк не показывает поведение шести длинных описаний. Набор будущих наблюдений должен включать содержательные крайние случаи, а не только аккуратно подобранную короткую страницу.

У reading-lab нет фиксированных высот карточек и заголовков. Это помогает сохранять текст при изменении ширины. Если после переноса две карточки имеют разную высоту, это допустимое следствие содержания. Выравнивание их внутренних заголовков не должно требовать удаления слов или ограничения количества строк.

Поля и общая высота документа

Следующий листинг — полный файл lesson-15.css:

.reading-lab { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.reading-lab .lab-main { width: 100%; flex: 1 0 auto; }
.reading-lab .lab-footer { margin-block-start: auto; }
.reading-lab .lab-header, .reading-lab .lab-footer { padding-inline: var(--lab-page-pad); }
@media (max-width: 41.999rem) {
  .reading-lab { --lab-page-pad: 1rem; }
  .reading-lab .lab-layout { gap: 1.5rem; }
  .reading-lab .lab-lead { font-size: 1.125rem; }
  .reading-lab .lab-code pre { padding-inline: 1rem; }
  .reading-lab .lab-table th, .reading-lab .lab-table td { padding-inline: .75rem; }
}

Ожидается, что короткая страница заполнит доступную высоту, а футер останется после содержимого у нижней границы. На длинном уроке он продолжит обычный поток и не перекроет последний абзац. Мы не используем закреплённый футер и не назначаем статье искусственную высоту.

Значение 100svh относится к небольшой высоте viewport, а предшествующее 100vh оставлено как запасное объявление. Разновидности viewport-единиц описаны в MDN. Используем именно минимальную высоту: содержимое может сделать документ длиннее. Это не обещание одинакового поведения всех элементов интерфейса браузера во всех условиях.

На узкой композиции уменьшаются поля, а не основной текст до миниатюрного размера. Листинг сохраняет собственный кегль и доступ к длинной строке. Таблица получает более компактные ячейки, но её минимальная ширина и область прокрутки остаются. Такие изменения согласуются с ролью объекта.

Между двумя удобными размерами

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

Если две колонки стали тесными, не увеличивайте максимальную ширину оболочки бесконечно. Это улучшит один большой экран, но не промежуточное окно. Рассмотрите более ранний переход к одной колонке или уменьшение необязательной боковой области. Решение должно сохранять основную роль статьи.

Также не оставляйте абсолютное позиционирование оглавления поверх текста ради красивого макета. Независимая высота заголовка и увеличенные шрифты могут привести к пересечению. Сетка и обычный поток позволяют областям занимать реальное место, поэтому мы использовали их в основном варианте.

Общий горизонтальный скролл — важный признак для разбора. Если его создала длинная строка кода, посмотрите на min-width сеточного элемента и внутреннюю прокрутку листинга. Если причина — изображение, проверьте ограничение его ширины. Скрытие переполнения у body не показывает, какой компонент нарушил договор.

Масштаб и длинные строки

Увеличение текста меняет не только плотность, но и число строк в служебных областях. Хлебные крошки и уровень подготовки могут переноситься. Для них не заданы строгие высоты, поэтому композиция должна увеличиваться естественно. Если ссылка пересекает соседнюю карточку, нужно искать жёсткое ограничение или неразрывное значение.

Технический URL внутри абзаца допускает перенос благодаря правилу четвёртого урока. Но строка листинга сохраняется. Сравните эти два случая: одно и то же длинное имя в объяснении и коде не обязано выглядеть одинаково. Различие объясняется задачей чтения, а не случайным набором свойств.

Короткий футер позволяет наблюдать другую крайность — страницу с малым количеством текста. При её составлении не добавляйте пустые абзацы, чтобы вручную опустить футер. Расположение обеспечивается общей оболочкой. Если содержание появляется позднее, высота увеличится без искусственных прокладок.

Представьте также вертикальную иллюстрацию вместо горизонтального прототипа. Страница станет длиннее, но должна сохранить последовательность: объяснение, изображение, подпись, следующий абзац. Адаптивность не обещает одинакового числа экранов для разных материалов. Она обеспечивает понятное устройство при изменении объёма.

Узкая композиция может также менять расстояния между служебными группами. Не уменьшайте их до полного слияния: метаданные, оглавление и начало статьи должны оставаться различимыми. Лучше убрать необязательную плотность окружения, чем отнять пространство у основной мысли. В нашем варианте сохраняются смысловые отступы между разделами, а уменьшаются внешние поля.

Если читатель повернул устройство, полезно рассмотреть и новую доступную высоту. Небольшое закреплённое оглавление на широком, но низком окне способно занять значительную часть видимого пространства. Это отдельное условие будущего просмотра, даже если ширина уже подходит для двух колонок. Подходящая сетка не отменяет ограничений высоты.

Наблюдения для будущего просмотра

Запишите условия, которые хотите сопоставить: узкое окно, промежуточная граница, широкое окно, увеличенный текст, длинное название и длинная техническая строка. Для каждого задайте ожидаемый признак. Например, «таблица прокручивается внутри своей области» точнее, чем «мобильная версия хорошая».

Не записывайте ожидаемый признак как полученный результат заранее. В серии предоставлены исходники и объяснение механизма; конкретное отображение нужно будет увидеть в выбранном браузере. Если наблюдение отличается, сохраните содержимое и условия, чтобы причина была воспроизводимой.

Для упражнения возьмите тот же HTML и измените только длину названия и число абзацев. Так вы увидите, выдерживают ли компоненты собственную вариативность. Отдельная короткая мобильная статья не позволяет сделать такой вывод о полном материале.

После этого урока вся страница имеет согласованные правила сжатия и высоты. В следующем уроке соберём основную часть в законченный снимок, отделив итоговое состояние от учебных промежуточных дополнений.