Почему классические @media больше не работают

С начала 2010-х медиазапросы стали стандартом в адаптивной вёрстке. Мы привыкли писать @media screen and (max-width: 768px) и считать, что сайт стал «мобильным». Но в 2025 году этого уже недостаточно.

Проблема не в синтаксисе, а в подходе. Медиазапросы предполагают, что сайт должен «подстраиваться под экран». Но пользователь давно не делит мир на «мобильные» и «десктопные» устройства. Сегодня важнее контекст использования — где, как, зачем и с каким ожиданием открывается сайт.

Реальность такова:

• Один и тот же пользователь может зайти с 14-дюймового ноутбука, с планшета в альбомной ориентации, с телевизора и с embedded-устройства с кастомной оболочкой.
• Количество экранов с нестандартными DPI, ориентацией и масштабированием постоянно растёт.
• Дизайнеры и фронтендеры работают с десятками breakpoints, которые не масштабируются и не поддерживаются в долгосрочной перспективе.

Контейнерные запросы (@container) как основа адаптации в 2025

Ответ на устаревание медиазапросов — контейнерные запросы, которые поддерживаются современными браузерами (Chrome, Edge, Firefox с 2023 года).

Что это такое? Если @media ориентируется на всю ширину экрана, то @container — на ширину конкретного блока-контейнера. Это означает, что элементы управляют своим поведением не в зависимости от устройства, а от контекста своего размещения.

Пример:

.container {
container-type: inline-size;
}
@container (max-width: 500px) {
.card {
flex-direction: column;
}
}

Преимущества:

• Упрощается логика адаптации компонентов.
• Можно переиспользовать блоки без переписывания стилей.
• Поведение интерфейса становится более предсказуемым и модульным.

В IZE мы уже используем @container в проектах с 2024 года. Это позволяет не создавать десятки дублирующих классов и breakpoints, а строить гибкие, легко масштабируемые UI.

Адаптив теперь — не по экранам, а по смыслу

Ключевой принцип 2025 года: адаптивность по смыслу, а не по ширине. Контент важнее устройства. Это значит:

1. Типографика — через clamp()

font-size: clamp(1rem, 2vw + 1rem, 2.5rem);

Такой подход позволяет автоматически подстраивать размер шрифта между минимумом и максимумом без прыжков и @media.

2. Гибкие сетки — min(), max(), fit-content()

Вместо жёстких px и em используется логика адаптивных контейнеров, которые подстраиваются под содержимое, а не наоборот.

3. Динамическое соотношение сторон (aspect-ratio)

.card {
aspect-ratio: 16 / 9;
}

Идеально для карточек, обложек и видео — не нужно больше писать костыли с padding-top.

4. CSS-Grid с auto-fit и minmax()

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Элемент сам занимает нужное пространство, не ломая верстку и не требуя ручного расчета.

Контентная адаптация вместо технической

Современный адаптив — это не только CSS. Это UX-решения на уровне контента и интерфейса.

Примеры из практики IZE:

• В мобильной версии мы не скрываем блоки, а перестраиваем их смысловую нагрузку. Например, крупное фото в десктопе превращается в галерею свайпов на смартфоне.
• В каталогах используется динамическая подгрузка и collapse, а не бесконечный scroll.
• В статьях и блоге — читабельная типографика с плавной адаптацией, а не просто уменьшение размера шрифта.

Что важно помнить: философия вместо хака

Медиазапросы были хороши, когда сайт был набором блоков на фиксированных экранах. Сегодня — это платформа взаимодействия, и она должна быть гибкой на уровне архитектуры.

Резюме:

• Забудьте @media как единственный способ адаптации.
• Стройте дизайн через компоненты и контейнерные запросы.
• Используйте новые возможности CSS как стратегию, а не как хак.

Адаптивный сайт — это больше, чем responsive

Адаптив — это не набор стилей. Это подход к разработке, при котором интерфейс живёт своей логикой, реагируя на ситуацию, а не на ширину экрана.

Именно такие сайты мы создаём в Студии IZE — от дизайн-концепции до готового проекта, который работает быстро, понятно и адаптируется по уму.

Всегда рады помочь!