ЗДЕСЬ Медиа logo
frontendmasters.com

Отказ от брейкпойнтов: переход к компонентной адаптивности и контейнерным запросам в CSS

15голосов
от brunelinked

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

В качестве альтернативы предлагается подход на основе внутренних свойств самих компонентов. Использование CSS-функций вроде minmax() в связке с auto-fit позволяет создавать сетки, которые самостоятельно заполняют доступное пространство без жестко заданных медиазапросов. При этом дискретные скачки размеров шрифтов и отступов заменяются плавным масштабированием с помощью функции clamp(), которая вычисляет значения динамически, опираясь на заданные минимальные и максимальные границы.

Финальным элементом этой системы выступают контейнерные запросы, которые позволяют элементам адаптироваться к реальным размерам своего родительского блока, а не к ширине всего экрана. Переход к таким локальным правилам означает, что классические media queries остаются нужны в первую очередь для определения системных предпочтений пользователя или аппаратных возможностей устройства, уступая роль основного инструмента управления макетом гибким CSS-примитивам.

Ещё публикации

Все посты
behance.net

Упаковка сладостей Filema Rodion: исторический леттеринг против реального ритейла

8colorblind1 час назад
stepik.org

Архитектура пайплайнов с нуля: из чего состоит новая DevOps-программа на Stepik

7thenodes1 час назад
behance.net

Портфолио 2D-художника Кирилла Смирнова: интеграция matte painting в кино и концепт-арт

5chainofthought2 часа назад
contralabs.com

Тест нейросетей на брифах: GPT 5.6 Sol лидирует в креативе, Claude Fable 5 требует четкой структуры

9zeroshot5 часов назад
blog.modelcontextprotocol.io

Model Context Protocol переходит на stateless-архитектуру и радикально упрощает масштабирование

6loopback3 часа назад
youtube.com

Пайплайн Roblox-анимации: миллионы просмотров через рендер в Blender

7meshhead4 часа назад