Адаптивная верстка — один HTML-код с медиазапросами, flex, grid и относительными единицами, который подстраивается под ширину экрана. Брейкпоинты — 360, 768, 1024, 1440 px. В 2026 году добавились container queries — блоки подстраиваются под контейнер, не под окно браузера. При приемке проверяют отсутствие горизонтального скролла, тап-зоны от 44 px и CLS ниже 0,1 — протокол из 18 пунктов ниже. Для разработчика, сдающего адаптив, и заказчика его принимающего.
Как устроена адаптивная верстка сайта
Медиазапросы меняют правила стилей по ширине экрана. Flex и grid перестраивают сетку: порядок блоков и число колонок. Относительные единицы rem, em, % и vw не дают блокам вылезать за контейнер. Пример: карточки каталога на телефоне идут столбиком, на планшете встают по две в ряд.
Резиновая верстка только растягивает блоки в процентах, а адаптив меняет саму раскладку. Если функционал на всех устройствах один — нужен адаптив: один код и одна поддержка. Если мобильный сценарий совсем другой, например в кабинете на телефоне нужны только оплата и статус заказа, — оправдана отдельная мобильная версия.
Минимальный каркас страницы
Каркас без фреймворков: <meta name="viewport" content="width=device-width, initial-scale=1"> в head, *, *::before, *::after { box-sizing: border-box; }, семантика header, main, footer, контейнер .container { max-width: var(--container); margin-inline: auto; } и сетка main { display: grid; gap: 1rem; }.
Порядок блоков в DOM сразу мобильный: раскладку потом меняют стилями, не трогая разметку.
Что сделать сейчас: проверьте, есть ли meta viewport в head, и уберите из CSS фиксированные ширины в px.
Брейкпоинты адаптивной верстки в 2026 году
Базовый набор — 360, 768, 1024 и 1440 px. Точки под конкретные модели айфонов устарели: устройств сотни, и ширины экранов у них разные. Брейкпоинт ставят там, где ломается макет: меню уползает, строка становится слишком длинной для чтения, карточки слипаются.
Mobile first на min-width
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
@media (min-width: 360px) { .grid { --cols: 1; } }
@media (min-width: 768px) { .grid { --cols: 2; } }
@media (min-width: 1024px) { .grid { --cols: 3; } }
@media (min-width: 1440px) { .grid { --cols: 4; } }
Критерий: mobile first — min-width, desktop first — max-width, в проекте один подход. Если смешать оба, правила конфликтуют и неясно, какое сработает. Свои точки сверьте с аналитикой аудитории: если много посетителей сидит между базовыми ширинами, добавьте промежуточную.
Container queries вместо медиазапросов
Карточка товара живет и в сетке на три колонки, и в узком сайдбаре. Ей важна ширина своего контейнера, а не окна браузера. Медиазапрос смотрит только на окно: на широком мониторе карточка в сайдбаре получит десктопную раскладку и сломается.
Критерий: если компонент переиспользуется в разных колонках — container query; если меняется вся страница — медиазапрос. Одна карточка с @container сама переключает раскладку в сетке, сайдбаре и подборке внизу страницы, без дублирования стилей. Так правила живут внутри компонента, а не размазаны по брейкпоинтам страницы.
Карточка на container queries
Условный пример, порог подбирают под свой макет:
.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { display: flex; gap: 1rem; } }
На что обратить внимание: контейнеру нужна явная ширина от родителя, иначе @container не сработает; лишняя обертка внутри обертки сбивает расчет. Проверяйте карточку в самой узкой колонке.
Что сделать сейчас: найдите 1–2 повторяющихся компонента, например карточку или баннер, и переведите их на @container.
Что ломается в адаптиве чаще всего
Если блок вылезает за контейнер, сначала ищите фиксированную ширину или отрицательный отступ. Прятать проблему через overflow: hidden не стоит: контент просто обрежется.
Картинки и сдвиги макета
Контентным картинкам ставят max-width: 100% и height: auto, а в разметке — атрибуты width и height: браузер заранее резервирует место, макет не прыгает, CLS не растет.
Если в srcset дескрипторы w, нужен атрибут sizes: без него браузер не поймет, какой файл выбрать. В sizes пишут px или vw, проценты от контейнера не работают. Lazy-loading — только для картинок ниже первого экрана, иначе первый экран грузится дольше.
Тап-зоны, шрифты и отступы на мобильном
Пальцем попадают хуже, чем курсором. Рабочий стандарт тап-зоны — от 44 px для кнопок, иконок меню и полей форм. Нижний порог WCAG 2.2 AA — 24×24 CSS px; цель меньше допустима, только если вокруг нее хватает пустого места до соседней.
- •Ссылки в меню и списках — отступ между ними, а не только размер элемента.
- •Иконки и стрелки пагинации — зона клика через padding, значок при этом не растет.
Если две ссылки стоят ближе пальца, увеличивайте отступ или hit-area через padding, а не шрифт.
Поля ввода — отдельная история: шрифт в них от 16 px, то есть не меньше базового 1rem. Сделаете мельче — iOS при фокусе увеличит страницу, и пользователю придется отдалять ее вручную.
Типографика через clamp
Базовый размер текста задают в rem — он растет вместе с настройками пользователя. Заголовки и отступы секций ведут через clamp(), без трех медиазапросов:
h2 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
section { padding-block: clamp(2rem, 5vw, 5rem); }
Значения здесь условные — берите свои из макета. Межстрочный интервал основного текста делают свободнее, чем у заголовков, а длину строки ограничивают через max-width в ch. Размер шрифта только в vw не ставьте: текст перестает масштабироваться зумом браузера.
Как проверить адаптивность сайта за 40 минут
Протокол приемки — 18 пунктов с ответом да или нет, в три этапа, на прогон уходит около 40 минут. Любое «нет» — баг, а не повод для спора. Симптомы и патчи для типовых поломок — в таблице выше, здесь только проверки.
DevTools: 360, 768, 1024, 1440 px и промежуточные ширины
- •Нет горизонтального скролла?
- •Меню открывается и закрывается?
- •Ни один симптом из таблицы поломок не воспроизводится?
- •Колонки перестраиваются на каждом брейкпоинте?
- •Картинки не вылезают за контейнер?
- •Тап-зоны от 44 px?
- •Строки текста не слишком длинные?
Реальный телефон
- •Формы не зумят страницу?
- •Клавиатура не закрывает поле?
- •Sticky-шапка не прыгает?
- •Все работает без hover?
- •Форма отправляется?
- •Первый экран не обрезан адресной строкой?
Lighthouse
- •CLS ниже 0,1?
- •Нет ошибок про viewport?
- •Шрифт читается без зума?
- •У картинок есть width и height?
- •Нет замечаний по размеру тап-зон?
Реальный телефон после DevTools
Эмулятор не покажет, как адресная строка съедает высоту, клавиатура перекрывает форму, прыгает sticky-шапка и как ведет себя тач вместо hover.
Баг фиксируют так: скриншот, ширина устройства, шаги. Без ширины разработчик не найдет нужный брейкпоинт.
Что сделать сейчас: пройдите на своем телефоне путь пользователя от главной до отправки формы.
Сколько стоит адаптивная верстка
В смету входят:
- •брейкпоинты базового набора;
- •адаптив всех шаблонов, которые есть в макете;
- •бургер-меню для мобильной навигации;
- •проверка по протоколу из 18 пунктов.
Отдельной работой считаются отрисовка мобильных макетов, которых нет у дизайнера, ретина-графика, доработка старого сайта и оптимизация Core Web Vitals.
Если мобильных макетов нет, верстальщик додумывает дизайн сам, и это отдельная строка в смете. Допустим, у дизайнера есть только десктопный каталог: раскладку карточек, фильтров и корзины на телефоне придется придумать с нуля. Так спор о том, входит ли правка в цену, решается еще до старта.
Что прописать в ТЗ
В договор вносят цифры, а не «удобно на телефоне»:
- •набор брейкпоинтов и ширин для проверки;
- •браузеры и устройства для тестов;
- •протокол из 18 пунктов как критерий приемки;
- •CLS ниже 0,1;
- •тап-зоны от 44 px на кнопках и ссылках.
Когда критерии записаны в договор, приемка сводится к проверке списка, а не к спорам о вкусе. Следующий шаг — прогнать свой сайт по протоколу выше: сразу видно, что уже работает, а что нужно чинить.
Проверим адаптив вашего сайта по 18 пунктам и покажем, что чинить в первую очередь. Верстка и доработка сайтов — от 50 000 ₽, раздел «Сайты».
Источники
