Аида Пачева написала о новом подходе к адаптивности сайтов.

— Оптимального вьюпорта нет, значит, адаптивность должна быть гибкой;
— Но это не значит, что надо больше брейкпоинтов и под все рисовать макеты;
— С помощью контейнерных запросов и min(), max() и clamp() можно делать адаптивными отдельные компоненты;
— При этом для каждого компонента проработать надо только те состояния, которые ему нужны. Некоторым надо совсем немного;
— Например, хедеру может хватить двух состояний: 1) Навигация свёрнута в бургере; 2) Навигация развёрнута. Место для неё появляется с ширины в 995 px;
— «Шампуров [брейкпоинтов] стало больше, но суммарное количество шашлчыков на них [состояний компонентов] — меньше»;
— Если компоненты готовы измениться на близких значениях ширины (995 и 1000 px), стоит их синхронизировать;
— Чтобы независимые компоненты сходились вместе по вертикальным направляющим, помогут глобальные правила для сетки и шрифтовых стилей для конкретных диапазонов брейкпоинтов;
— Адаптивность может быть многоуровневой. При изменении ширины вьюпорта может перестраиваться блок с карточками, а уже при изменении ширины карточки в этом бллоке — перестраиваться её содержимое.

#adaptive