Адаптивная вёрстка сайта: что это и как её сделать

Адаптивная вёрстка — это HTML-документ, стили которого перестраивают макет под ширину экрана устройства, на котором открыт сайт. Такая вёрстка адаптивная работает за счёт метатега viewport, медиазапросов, гибких сеток на Grid и Flexbox, относительных единиц и отзывчивых изображений. Отдельный мобильный поддомен или вторая версия страницы для этого не нужны — контент и код остаются общими для всех устройств.

Если читатель впервые разбирается, что такое адаптивная вёрстка, ниже найдёт таблицу брейкпоинтов, рабочий CSS-код для сеток и изображений, разницу между Mobile First и Desktop First, пошаговый порядок работы и чек-лист проверки. Материал показывает, как элементы страницы корректно отображаются на любых устройствах — от смартфона шириной 320 px до монитора 2560 px. Устройство адаптивной страницы может быть любым: пользователь при этом не должен замечать разницы, сайт остаётся удобным на каждом экране, каким бы это устройство ни было. Быть готовым к такой проверке нужно ещё на этапе макета, а не после публикации сайта. Эта статья пригодится и разработчику, который делает вёрстку впервые, и тому, кто уже имеет опыт и ищет конкретные примеры кода.

Зачем адаптивная вёрстка нужна сайту

• Единая кодовая база: макет и набор стилей вместо отдельных версий для десктопа и смартфона снижают затраты на разработку и поддержку — экономия может быть заметной уже на этапе оценки проекта.
• Поисковые системы используют мобильно-первую индексацию: Google и Яндекс сканируют мобильную версию страницы, и от её качества зависит позиция сайта в выдаче.
• Меньше отказов: пользователю не нужно масштабировать страницу вручную, если блоки и текст уже подстроены под ширину маленьких экранов.
• Корректная работа рекламного трафика: до 60–70% переходов из контекстной рекламы приходят со смартфонов, и без адаптивности часть этих визитов не доходит до целевого действия.
• Удобная навигация на разных устройствах — планшетах, ноутбуках, больших мониторах — без потери читаемости текста.
• Единообразие интерфейса на всех экранах: пользователь видит привычные элементы меню независимо от того, с какого смартфона или компьютера открыт сайт.
• Адаптивность повышает доверие: неудобный сайт на смартфоне пользователь закрывает за несколько секунд и уходит к конкуренту, а удобный сайт может удержать посетителя дольше.
• Разработка адаптивности не нужна для внутренних десктопных панелей — например, админок и CRM, которые открывают только с рабочего компьютера с фиксированным разрешением.
• Разработка сайта без учёта адаптивности сегодня может считаться устаревшим подходом: доля мобильного трафика у большинства проектов уже превышает половину визитов, и пользователю должно быть удобно независимо от смартфона в руках.

ТЗшник разобрал 18 страниц выдачи Яндекса и Google по запросу «адаптивная верстка», выделил 8 разделов — от брейкпоинтов до чек-листа проверки — и на основе этих замеров сам написал текст объёмом 1407 слов при медиане 1343, довёл релевантность до 95 пунктов из 100. Человеку остаётся подставить примеры своих проектов и инструментов тестирования, проверить актуальность значений брейкпоинтов и опубликовать готовую страницу.

Фиксированная, резиновая, адаптивная, отзывчивая: чем различаются

Эти четыре типа вёрстки решают одну задачу разными способами, и у каждого свой принцип к структуре страницы. Фиксированная вёрстка задаёт размеры блоков в пикселях и не меняется при изменении окна браузера. Резиновая верстка (fluid) использует относительные единицы — проценты и em — и растягивается плавно, но без учёта конкретной ширины экрана. Адаптивная вёрстка переключает набор стилей на заданных брейкпоинтах через медиазапросы: под каждый тип устройства готовится свой вариант макета. Отзывчивая вёрстка (responsive) объединяет оба подхода: гибкая сетка внутри плюс переключение макета между точками.

Отдельная мобильная версия — это другой URL и другой набор шаблонов под тип устройства, тогда как адаптивный дизайн держит единый адрес и одну структуру страницы для всех. Выбор типа вёрстки зависит от задачи: интернет-магазину с каталогом и фильтрами нужна гибкая сетка шириной экрана, а простой посадочной странице хватит резиновой вёрстки без сложных перестроений элементов. Итоговая структура страницы должна быть понятной ещё на этапе эскиза, иначе переход между типами вёрстки потребует переработки блоков и лишних правок кода.

Размеры экранов и брейкпоинты: под какие ширины адаптировать

Брейкпоинт ставят не «на глаз», а в той точке, где макет реально ломается — съезжает элемент, текст наезжает на картинку. Для большинства проектов достаточно 3–4 точек экранов адаптивной верстки.

Важно различать разрешение экрана в физических пикселях и CSS-пиксели, с которыми работает вёрстка. У смартфонов и планшетов device pixel ratio часто равен 2 или 3: экран с разрешением 1170×2532 физических пикселей браузер отдаёт как ширину около 390 CSS-пикселей. Именно эти значения используют в медиазапросах, а не паспортное разрешение экрана устройства. Для маленького экрана смартфона важно проверить, что размер шрифта и кнопок остаётся читаемым при разрешении от 320 px. Разрешение экрана монитора может быть выше 4K, но макет обычно ограничивают максимальной шириной контейнера, чтобы строки текста не растягивались слишком сильно, а размер элементов оставался соразмерным экрану — параметр контейнера в этом случае становится ключевым параметром вёрстки.

Как работает адаптивная вёрстка: viewport, медиазапросы, сетки и изображения

Механика адаптивной вёрстки строится на четырёх элементах кода, которые должны быть согласованы между собой.

1. Метатег viewport. Без него мобильные браузеры масштабируют страницу как десктопную, и адаптивность не сможет включиться:

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Медиазапросы CSS3. Условия min-width, max-width и orientation переключают стили при заданной ширине экрана. Это основной инструмент media queries на css, без которого макет не сможет подстраиваться под размер окна:

@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
}

Контейнерные запросы @container в css реагируют на размер родительского элемента, а не всей страницы, и полезны для переиспользуемых частей интерфейса.

3. Гибкие сетки и относительные единицы. Grid и Flexbox на css с функцией minmax() задают элементам сетки минимальный и максимальный размер:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

Единицы измерения %, em, rem, vw и vh в css задают размеры относительно родителя, шрифта или экрана, а clamp() помогает избежать резкого изменения размера шрифта между брейкпоинтами. Использовать относительные единицы css нужно везде, где элемент должен реагировать на изменения ширины экрана, а не оставаться фиксированным. Такой подход применяют и к отступам, и к высоте строк, и к размерам иконок, чтобы весь интерфейс менялся согласованно.

4. Гибкие изображения. Базовое правило css ограничивает картинку шириной элемента-контейнера:

img { max-width: 100%; height: auto; }
<img srcset="photo-480.webp 480w, photo-1024.webp 1024w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="photo-1024.webp" loading="lazy" alt="">

Тег picture и форматы WebP или AVIF снижают вес изображения на 30–50% по сравнению с JPEG без потери качества, а loading="lazy" откладывает загрузку картинок ниже первого экрана. Гибкие изображения обязательны для интернет-магазинов и галерей, где вес страницы напрямую влияет на скорость и удержание пользователя. Использование всех четырёх элементов вместе — единственный способ добиться того, чтобы интерфейс вёл себя предсказуемо на любом устройстве.

Mobile First или Desktop First: с какого экрана начинать

Разница видна прямо в коде: Mobile First строит базовые стили под узкий экран и добавляет правила через min-width, а Desktop First делает наоборот — задаёт полный макет и сужает его через max-width. Такой подход может дать меньше кода, потому что смартфон получает только нужные стили без переопределений, и хорошо ложится на приоритет мобильного трафика в поисковых системах.

Desktop First оправдан для внутренних сервисов и сложных таблиц с данными, где основная работа идёт с компьютера, а мобильная версия нужна только для просмотра. Для публичных сайтов с преобладанием смартфонов в статистике визитов чаще всего выбирают первый подход, потому что он проще при создании адаптивных интерфейсов с нуля и требует меньше правок для маленьких экранов. Оба подхода могут применяться в одном проекте: административная часть — по второму принципу, публичная — по первому. Выбор подхода часто зависит от того, какой трафик приносит больший результат клиенту.

Пошагово: как сверстать адаптивную страницу

1. Подготовьте макеты в Figma для трёх ширин — 360, 768 и 1440 px — и опишите, как элементы меняют порядок и количество колонок.
2. Соберите HTML-структуру и сразу добавьте метатег viewport в head документа.
3. Напишите базовые стили css под узкий экран 320–480 px: это стартовая точка для Mobile First при создании адаптивных страниц.
4. Постройте сетку на Grid или Flexbox с относительными единицами вместо px для отступов и ширины элементов.
5. Добавьте медиазапросы для хедера, меню-гамбургера, количества карточек и футера на каждом брейкпоинте.
6. Настройте изображения через srcset и типографику через clamp(), проверив читаемость заголовков на всех ширинах.
7. Адаптируйте формы и таблицы: длинные строки данных на смартфоне лучше превращать в карточки, а не сжимать колонки.

Пример: карточки преимуществ на 1440 px показывают три штуки в ряд через grid-template-columns: repeat(3, 1fr) — это десктоп-вид, привычный пользователю большого монитора. На 768 px они перестраиваются в два элемента через минимальную ширину minmax(220px, 1fr). На 360 px auto-fit оставляет одну карточку в ряд — они складываются друг под другом без горизонтальной прокрутки. Так сделать адаптивную верстку такого узла можно без отдельных медиазапросов, если задать minmax() правильно. Такой готовый приём удобно переносить между проектами: он одинаково хорошо ведёт себя на разные устройства и не требует переписывания под каждый новый макет. Разработка подобных универсальных блоков экономит время на последующих проектах, где нужен готовый макет — ещё один пример практики повторного использования кода.

Как проверить адаптивность и какие ошибки встречаются чаще всего

Перед публикацией макет проверяют инструментом DevTools в режиме device toolbar, плавно меняя ширину окна от 320 до 1920 px и сравнивая, как выглядит десктоп-версия и мобильная. Дальше — тест на реальных устройствах: смартфон и планшет часто показывают то, что эмулятор скрывает. Lighthouse — ещё один сервис, который оценивает Core Web Vitals и находит проблемы с загрузкой изображений. Третий инструмент — валидатор вёрстки, который выявляет ошибки в структуре HTML, влияющие на отображение элементов. Финальный прогон занимает время: его делают в двух-трёх разных браузерах, включая мобильный Safari, чтобы контент и элементы управления вели себя без сбоев на всех устройствах.

• Нет viewport или стоит user-scalable=no → пользователь не может зумить страницу → добавить метатег без запрета масштабирования.
• Горизонтальная прокрутка из-за жёсткой ширины элемента или длинного слова без переноса → заменить px на % и добавить word-break: break-word.
• Тач-зоны меньше 44 px → пользователь не попадает пальцем по кнопке → увеличить padding кликабельных элементов.
• Важный контент скрывают display: none вместо перестройки макета → потеря информации на смартфоне → менять порядок элементов через grid-order, а не прятать их.
• Одна тяжёлая картинка отдаётся на все устройства → рост времени загрузки → подключить srcset с несколькими размерами.
• Стили завязаны на hover без тач-альтернативы → на экране устройства без мыши подменю не открывается → добавить обработку клика.
• Жёсткая высота блока обрезает контент при смене шрифта → задать min-height вместо height, чтобы пользователь мог прочитать текст целиком.

Частые вопросы об адаптивной вёрстке

Цены, сроки и состав работ приведены по информации Компании Комета (cometa.agency), проверено 14 сентября 2026. Стоимость зависит от ниши и объёма работ, точный расчёт — после разбора проекта.