Почему нам нужны новые подходы к адаптивному дизайну

В мире веб-разработки адаптивный дизайн всегда был ключевым аспектом создания качественных пользовательских интерфейсов. Долгое время мы полагались на медиа-запросы, привязанные к размеру экрана:

/* Традиционный подход с медиа-запросами */ @media (max-width: 768px) { .card { flex-direction: column; } }

Этот подход привел к появлению условных конструкций в коде компонентов: Нажми меня

Хотя медиа-запросы решали многие проблемы, они имеют существенный недостаток: компоненты реагируют только на размер экрана, а не на контекст, в котором они используются. Но что, если компоненты могли бы адаптироваться к размеру своего непосредственного контейнера?

Если схематично представить, то получается так, что вписываем наши компоненты в рамки и от их размеров этот компонент сам будет меняться 0px 350px 500px │─────────│────────────│

│ ┌────────────────────────────┐ │ │ ┌──────┐ Address │ │ │ │ IMG │ $280k–$310k │ │ │ └──────┘ [Confidence: 85%] │ │ └────────────────────────────┘ 0px 350px │─────────│

│ ┌────────────────────────────┐ │ │ ┌────────────┐ │ │ │ │ IMAGE │ │ │ │ └────────────┘ │ │ │ 123 Main St, Phoenix AZ │ │ │ $280,000 – $310,000 │ │ │ [Confidence score: 85%] │ │ └────────────────────────────┘

Далее это вижу так: любой шаблон, макет, layout — это всегда набор блоков, в которые помещаются элементы интерфейса и контент.

Возьмём лист А4 — у него фиксированная ширина, но внутри этой ограниченной области мы можем располагать элементы, считая, что доступная ширина — 100%. Аналогично с экранами устройств: у каждого девайса своя фиксированная ширина в пикселях, но с точки зрения CSS мы всё равно часто оперируем значением width: 100%.

Контент всегда занимает доступную ширину родителя. Один блок вкладывается в другой, и относительные значения продолжают работать — 100% внутри 100%, но в пикселях это уже конкретные числа, зависящие от контекста.

Это база (пересказал css): любой layout строится из вложенных прямоугольников с фиксированной пиксельной шириной, даже если мы пишем width: 100%.

Так вот вопрос: если карточки, блоки и секции в макетах всё равно имеют фиксированные размеры, зачем нам ориентироваться на ширину экрана? Мы же хотим вписывать компоненты в конкретные блоки, а не подгонять их под экран. Гораздо логичнее мыслить не “экранами”, а “контейнерами”.

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

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