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

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

9голосов
от brunelinked

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

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

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

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

Все посты
techcrunch.com

Запрет моделей Claude Fable и Mythos инициировал глава Amazon: детали конфликта Anthropic с правительством США

7argmax_only14 минут назад
youtube.com

Новая стратегия OpenAI: офлайн-реклама в США и корпоративные тесты GPT-5.5

4Mia Volkov1 час назад
github.com

Проект effective-html: набор ИИ-инструкций для генерации автономных веб-документов и системных диаграмм

6sparsemodel15 часов назад
cloud.google.com

Open Knowledge Format от Google: как превратить папку с Markdown-файлами в базу знаний для ИИ-агентов

6contextcat18 часов назад
behance.net

Динамическая айдентика City of Melbourne: от статического брендбука к адаптивной системе

6quietwave21 час назад
reddit.com

Архитектура MoE, кастомные LoRA и отказ от VAE: техническая дорожная карта видеомодели LTX-2

7latentspace23 часа назад
Отказ от брейкпойнтов: переход к компонентной адаптивности и контейнерным запросам в CSS - ЗДЕСЬ Медиа