🧱 Адаптивность не обязана держаться на брейкпоинтах
Amit Sheen пишет о проблеме, которую легко не замечать по привычке: мы всё ещё часто проектируем адаптивность от ширины экрана, хотя современные интерфейсы давно живут компонентами. Один и тот же блок может оказаться в ленте, сайдбаре, модалке, карточке дашборда или внутри другого компонента. В такой ситуации глобальный брейкпоинт часто отвечает не на тот вопрос.
Вместо постоянных условий «если экран шире 768px, сделай так» автор предлагает начинать с более гибких решений в CSS. Сетка может сама набирать столько колонок, сколько помещается. Отступы и шрифты могут плавно меняться через clamp(). Компонент может смотреть на размер своего контейнера, а не всего окна. А медиазапросы лучше оставить для того, где они правда нужны: возможности устройства, наличие ховера, точность указателя, пользовательские настройки и режим отображения.
Внутри:
– Почему брейкпоинты хорошо работали для страниц, но хуже подходят для компонентных систем;
– Как auto-fit и minmax() помогают строить сетки без ручного числа колонок;
– Зачем использовать плавные значения вместо скачков между размерами;
– Как clamp() заменяет несколько медиазапросов для шрифтов и отступов;
– Почему контейнерные единицы полезнее ширины экрана для переиспользуемых компонентов;
– Когда контейнерные запросы нужны для реального изменения структуры;
– Почему медиазапросы не исчезают, а меняют роль;
– Как такой подход делает адаптивный интерфейс проще для поддержки.
➡️ Читать статью
———
💻 Курс по поиску работы 😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы