В старые времена вопрос адаптива решался сурово: вот макет для десктопа, вот макет для планшета, вот макет для телефона. Иногда ещё отдельная мобильная версия сайта на поддомене m.site.ru, чтобы страдания были не только у пользователя, но и у разработчика.
Сейчас браузеры умеют заметно больше. Настолько больше, что периодически возникает крамольная мысль: а можно ли уже не делать отдельную адаптивную версию, а сверстать сайт так, чтобы он сам нормально жил в разных размерах?
Короткий ответ: можно. Длинный ответ: можно, если не путать современную резиновую верстку с надеждой на чудо.
Что раньше называли адаптивом
Долгое время адаптивная верстка выглядела как набор контрольных точек. На 1200 пикселях блоки стоят в три колонки. На 768 — в две. На 480 — в одну. Между этими точками — как повезёт.
Это работало и работает до сих пор. Но у метода есть неприятный запах старого шкафа: мы всё ещё думаем не блоками, а устройствами. Как будто существует один стандартный телефон, один стандартный планшет и один стандартный монитор. Спойлер: не существует.
Современный подход
Современная верстка всё больше уходит от идеи «сделаем отдельную мобильную версию» к идее «сделаем гибкий компонент». Не страница под размер экрана, а блок, который сам понимает, сколько у него места.
Для этого наконец-то есть нормальные инструменты:
- Flexbox — для аккуратного распределения элементов в строке или колонке;
- CSS Grid — для сеток без шаманства и лишних распорок;
- container queries — чтобы блок реагировал на размер своего контейнера, а не всего окна;
- clamp(), min(), max() — для плавных размеров, отступов и шрифтов;
- responsive images — чтобы телефон не ел картинку размером с афишу на фасаде;
- логические свойства CSS — чтобы не прибивать верстку гвоздями к left и right;
- современные единицы типа dvh, svh, lvh — чтобы мобильные браузеры меньше издевались над высотой экрана.
Container queries — главный сдвиг в голове
Медиазапрос спрашивает: «какая ширина окна?» Контейнерный запрос спрашивает: «сколько места дали конкретно этому блоку?» Разница огромная.
Один и тот же блок новости может стоять на главной в широкой сетке, в узкой колонке, внутри карточки или в сайдбаре. Раньше для этого часто лепили модификаторы, классы и специальные исключения. Теперь блок можно заставить менять поведение от собственного пространства.
.article-card {
container-type: inline-size;
}
@container (min-width: 520px) {
.article-card__inner {
display: grid;
grid-template-columns: 180px 1fr;
gap: 24px;
}
}
Это уже не адаптив под телефон. Это нормальная компонентная верстка. Почти взрослая жизнь.
Fluid вместо набора костылей
Ещё один приятный момент — плавные размеры. Шрифт не обязан прыгать с 18 на 16 пикселей в одной контрольной точке, как испуганный заяц. Можно задать диапазон.
h1 {
font-size: clamp(32px, 5vw, 64px);
}
То же самое с отступами, ширинами, промежутками. Страница начинает вести себя мягче. Не «десктопная версия», «планшетная версия», «мобильная версия», а нормальная живая раскладка.
Значит, адаптив больше не нужен?
Вот тут важно не увлечься. Адаптив как отдельная философия «нарисуйте мне три версии сайта» действительно постепенно устаревает. Но адаптивность как свойство интерфейса никуда не делась.
Сайт всё равно нужно проверять на телефоне. Меню всё равно должно открываться пальцем. Формы должны быть удобными. Картинки — не ломать сетку. Таблицы — не превращаться в горизонтальную простыню. Кнопки — нажиматься, а не проверять точность попадания пользователя.
Современные методы не отменяют адаптив. Они позволяют не делать из адаптива второй сайт.
Где отдельные макеты ещё нужны
Иногда отдельное проектирование мобильного сценария всё ещё необходимо. Например:
- сложные личные кабинеты;
- интернет-магазины с фильтрами и большим каталогом;
- таблицы, отчёты, калькуляторы;
- сервисы, где мобильный пользователь решает другую задачу;
- интерфейсы, где важен порядок действий, а не просто перенос колонок.
В таких случаях нельзя просто сказать Grid: «ну ты там сам как-нибудь». Сам как-нибудь — это обычно название будущей переделки.
Что делать на практике
Я бы формулировал задачу так: не «сверстать десктоп и адаптив», а «сделать устойчивую верстку». Устойчивую к разной ширине, длинным заголовкам, разным изображениям, увеличенному шрифту, нестандартному контенту и человеку, который открыл сайт не на нашем любимом тестовом разрешении.
Нормальная схема сегодня выглядит так:
- сначала семантичная HTML-структура;
- потом гибкая сетка на Grid/Flexbox;
- потом плавные размеры через clamp(), min(), max();
- потом container queries для компонентов;
- потом точечные медиазапросы там, где без них действительно нельзя;
- и обязательно проверка на реальных устройствах, а не только в красивом режиме браузера.
Отдельная адаптивная версия в старом смысле всё чаще не нужна. Современный CSS позволяет делать интерфейсы, которые не переключаются между тремя нарисованными состояниями, а нормально текут между размерами.
Но это не значит, что можно перестать думать о мобильных пользователях. Наоборот, думать приходится раньше и глубже. Просто теперь у нас есть инструменты получше, чем мешок медиазапросов и надежда, что на 375 пикселях никто ничего не заметит.
Современная верстка — это не отказ от адаптива. Это попытка перестать делать из адаптива отдельный филиал сайта с собственными костылями, болью и маленьким кладбищем исключений в CSS.