Адаптивный CSS: сетка, контейнер, порядок элементов и размер текста

← Все подборки материалов

Разработка · 4 материала

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

4 материала по задачеПерейти к инструкциям ↓
В этой подборке

Материалы подборки

Выберите инструкцию под свою задачу. Ниже — подробный разбор выбора и проверки результата.

Матрица выбора приёма

Наблюдение Что исследовать Проверка
Карточки не помещаются в строку Модель раскладки и размеры Сетка работает с разным числом карточек
Компонент ломается только в узкой колонке Условия контейнера Один компонент работает в разных областях
Нужен другой визуальный порядок Расположение элементов Смысловой порядок остаётся понятным
Текст слишком велик или мал Границы размера через clamp Текст читается между крайними размерами

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

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

Почему проверки двух размеров недостаточно

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

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

Визуальная перестановка требует отдельного внимания: она не должна превращать чтение и взаимодействие в противоречивый маршрут. Пройдите элементы клавиатурой и прочитайте содержимое в естественной последовательности. Если порядок неудобен, пересмотрите структуру или задачу перестановки, а не только значение свойства CSS.

Приёмка адаптации

  1. Нет непредусмотренной горизонтальной прокрутки.
  2. Текст остаётся читаемым и не перекрывает управление.
  3. Компонент работает в разных контейнерах.
  4. Сетка сохраняет понятный вид при изменении числа элементов.
  5. Порядок чтения и взаимодействия остаётся логичным.

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