Резиновый и адаптивный дизайн

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

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

Современная отзывчивая вёрстка обычно сочетает плавные размеры и изменения по контрольным точкам. Её основные приёмы разобраны в руководстве MDN по responsive design. Важен итог: содержание удобно на разных экранах, а не формальное использование процентов.

Начните с контейнера

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

.container {
  width: calc(100% - 2rem);
  max-width: 72rem;
  margin-inline: auto;
}

На узком экране контейнер занимает доступное пространство за вычетом полей, на широком перестаёт расти. Значение 72rem здесь пример, а не универсальная норма. Для длинного текста может потребоваться более узкая колонка, чем для карточек каталога.

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

Как перестроить колонки

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

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

Не задавайте всем блокам высоту в процентах без ясной основы расчёта. Для текстовых секций естественная высота чаще безопаснее: она учитывает перенос строк и изменение размера шрифта. Фиксированная высота может обрезать текст после редакторской правки.

Изображения, таблицы и длинные строки

Изображение не должно растягивать родительский блок. Для обычной иллюстрации применяют ограничение максимальной ширины и сохранение пропорций: max-width: 100%; height: auto;. Дополнительно выбирайте подходящий размер файла, чтобы гибкость не оборачивалась загрузкой огромной картинки.

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

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

Что учесть на телефоне

В служебной части страницы нужен корректный viewport, обычно width=device-width, initial-scale=1. Он позволяет браузеру использовать реальную ширину устройства для компоновки. Не запрещайте масштабирование ради сохранения макета.

Проверьте размеры и расстояния между интерактивными элементами. Компактное меню должно открываться с понятной кнопки и закрываться предсказуемо. Закреплённые панели не должны перекрывать заголовки, формы и нижнюю часть содержания.

Учитывайте не только ширину, но и высоту окна. Длинное закреплённое меню может целиком не помещаться на небольшом ноутбуке. В таком случае меняйте поведение колонки или обеспечивайте доступ ко всем пунктам; простого увеличения z-index недостаточно.

Как проверить резиновую вёрстку

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

Просмотрите формы в разных состояниях: заполненные поля, длинная ошибка, открытый список. Убедитесь, что фокус виден и элементы доступны с клавиатуры. Макет, который выглядит хорошо только в пустом состоянии, ещё не готов к работе.

Составьте небольшой набор проверочных страниц и повторяйте его после изменений общих стилей. Если ошибка проявилась в одном месте, найдите общее правило, которое её вызывает. Исправление общей причины надёжнее набора специальных ширин для отдельных статей.