Что такое адаптивная вёрстка страниц сайта: полный гайд, теория и практика

Краткий ответ и быстрый чек-лист адаптивности (2026)

Адаптивная верстка — подход, при котором интерфейс и контент автоматически подстраиваются под размер экрана и возможности устройства. Ключевые механики: Flexbox/Grid, относительные единицы (%/rem/vw/dvh), media- и контейнерные запросы, responsive-изображения (srcset/sizes/picture), корректный viewport, доступность и производительность.

Использйте следующие параметры для адаптивной верстки:

• Viewport: в head добавьте meta viewport без запрета масштабирования.
• Сетка: макет на Grid/Flex, без фиксированных ширин; ширины/контейнеры через clamp().
• Единицы: rem/em/%/vw/vh + dvh; fluid-типографика через clamp().
• Запросы: Mobile-First (@media min-width) + @container (inline-size) для компонентов.
• Изображения: picture с AVIF/WebP → JPEG fallback; у img атрибуты width/height, loading="lazy".
• Доступность: кликабельные области ≥44px, видимые фокусы, контраст (WCAG 2.2).
• Производительность: фокус на LCP/INP/CLS; приоритеты загрузки (fetchpriority), критический CSS.

Теперь поговорим об адаптивной верстке подробнее

Адаптивная верстка сайта — это формирование структуры документа на базе HTML-разметки, предусматривающей автоматическое изменение страницы в зависимости от размера экрана пользователя. Простыми словами, это макет страницы, который сам подстраивается под любой экран, что отличает его от отдельного мобильного приложения.

Проверь качество контента на сайте. Чек-лист за заявку!

• Подарим чек-лист по проверке качества контента на сайте.
• Проконсультируем по SEO-вопросам.

Получить чек-лист

Помните советскую игру «Тетрис»? Там нужно было складывать падающие блоки конструктора, чтобы они подходили друг к другу по форме фигур.

Динамическая верстка весьма похожа на тетрис, где блоки и элементы документа складываются, взаимодействуя друг с другом. При этом страница остается удобной и хорошо читаемой на экранах любого размера.

Взгляните на макет страницы:

Адаптивная верстка убирает горизонтальный скролл и сохраняет удобную вертикальную прокрутку.

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

1. Удобство для пользователей. Такие сайты удобны для просмотра на любых устройствах: от смартфонов и планшетов до телевизоров. Если страница остается читаемой только на десктопе, а мобильному пользователю приходится прикладывать усилия, чтобы нажать на элемент или просто ознакомиться с контентом, количество отказов на сайте резко увеличится.
2. Больше трафика. Без адаптивности сайт теряет огромный сегмент аудитории с мобильных устройств. Соответственно, и трафик, который они могли бы привести при условии быстрого открытия страниц.
3. Более высокий коэффициент конверсий. Адаптивный веб-дизайн улучшает конверсию благодаря удобству на мобильных. Критически важна адаптивность для коммерческих сайтов, где неудобство напрямую ведет к снижению конверсии и падению прибыли для владельца бизнеса.
4. Улучшенная и более точная веб-аналитика. Сайт один (а не два, как с мобильной версией) — поэтому проще отслеживать ключевые показатели эффективности бизнеса.
5. Экономнее в долгосрочной перспективе. Вместо того чтобы каждый раз разрабатывать сайт для разных размеров экрана, адаптивный веб-дизайн можно создать только один раз.
6. Лучший пользовательский опыт. Например, в розничной торговле покупатель может начать свой путь с мобильного устройства, а продолжить его с десктопа или ноутбука. Можно поддерживать единый пользовательский опыт в каждой точке взаимодействия.
7. Более простое управление и администрирование. Один сайт — быстрее и легче.
8. Лучшая адаптация для SEO-продвижения. Отсутствует дублирование контента, как в случае с двумя и более версиями сайта. Следите за LCP/INP/CLS — адаптивная верстка и responsive-медиа напрямую влияют на эти метрики и позиции в поисковом ранжировании.

Разница между адаптивной и мобильной версией сайта

Технически мобильная версия сайта на поддомене (чаще всего m.) — это отдельный, самостоятельный ресурс. Адаптивный сайт объединяет в себе мобильную и десктопную версию, при этом его интерфейс подстраивается под любой тип устройства пользователя.

Стоит отметить несколько достоинств и недостатков обоих подходов.

Сравнение подходов

Теория. Устройство адаптивной верстки

Давайте смотреть, как это работает.

Медиазапросы стилей

Медиазапросы — это правила-триггеры, применяемые к CSS, которые реагируют на тип устройства, тип экрана, отображаемый браузер или даже ориентацию устройства. Цель медиазапроса — разделить использование различных макетов с задействием одних и тех же блоков контента, каждый из которых оптимизирован для размера или функций рассматриваемого устройства.

@media screen and (max-width: 600px) {
  /* CSS-стили */
}

Логический оператор and позволяет связывать вместе разные типы условий

Медиазапрос следует правилу, основанному на параметрах минимальной и/или максимальной ширины, наряду с другими факторами (например, разрешение, браузер и ориентация экрана). Подробнее о них мы расскажем ниже, в разделе «Параметры и правила».

Современная практика: Mobile‑First, контейнерные запросы и fluid‑типографика

Контентные брейкпоинты: подбирайте точки перелома по разлому контента, а не по «магическим» разрешениям устройств.

:root { --step-0: clamp(1rem, 0.5rem + 1.5vw, 1.25rem); }
h1 { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }

.card-grid { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}

Подсказка: комбинируйте Grid для макета страницы и Flex для внутренних линий/элементов.

«Жидкие» сетки

Адаптивный веб-дизайн использует алгоритм для нормализации элементов пользовательского интерфейса к размеру экрана и пикселям. Делается это с помощью так называемого «жидкого макета», в котором каждый компонент учитывается в процентах, которые он занимает по ширине.

Блок содержимого, изображение и отступы между блоками и вокруг них складываются вместе, чтобы составить 100 % в ширине.

Гибкие изображения

Для изображений используйте относительные размеры и атрибуты ширины/высоты:

img { max-width: 100%; height: auto; }

и responsive-стек:

<picture>
  <source type="image/avif" srcset="elva-320.avif 320w, elva-800.avif 800w" sizes="(max-width: 480px) 440px, 800px">
  <source type="image/webp" srcset="elva-320.webp 320w, elva-800.webp 800w" sizes="(max-width: 480px) 440px, 800px">
  <img src="elva-800.jpg" width="800" height="600" alt="Elva dressed as a fairy" loading="lazy" decoding="async">
</picture>

Теперь переходим к оставшимся маркерам.

Относительность и размеры

Адаптивная верстка предусматривает относительность буквально во всем. Например, в определении размера шрифта, размера отступов и конечно, ширины и высоты.

Относительные значения определяют 4 главных параметра:

1. Ширину (width);
2. Высоту (heights);
3. Межблоковое расстояние или отступы (margin);
4. Отступ от контента до границы блока (padding).

Все вышеуказанные параметры чаще всего прописываются в процентном соотношении. Также допустимо задействовать vw* и vh* (только внутри div-тега):

• vw (сокращенно от Viewport Width) – процентная величина от суммарной ширины области viewport’а (пользовательская область просмотра);
• vh (сокращенно от Viewport Height) — процентная величина от суммарной высоты viewport’а.

Для стабильной высоты на мобильных используйте dvh/svh/lvh вместо 100vh. Для интернационализации — логические свойства (inline-size, block-size, margin-inline и др.).

Breakpoints

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

Размеры экранов для адаптивной верстки

Используйте контентные брейкпоинты: добавляйте @media (min-width) там, где ломается макет компонента/секции. Стартовые ориентиры: 480 / 768 / 1024 / 1280 / 1440 / 1920 — как отправная точка, а не догма.

Фреймворки на основе стилей

Чтобы прописывать CSS, необязательно редактировать код вручную. Начинающие верстальщики могут воспользоваться готовыми библиотеками фреймворков, чтобы загрузить шаблон CSS в head (link rel="stylesheet").

Фреймворков очень много, но мы рекомендуем воспользоваться проверенными решениями: Pure или Bootstrap. Если по каким-то причинам они не подошли, есть еще один хороший вариант — Bulma. Grid и Flex — предпочтительные инструменты сетки.

Размерность шрифтов

Адаптивная верстка подразумевает использование 2 единиц — em (допускает вариативность для любого элемента документа) и rem (задается один раз на страницу). Em — это размер шрифта, который используется на смартфоне или другом мобильном устройстве по умолчанию. Прописываем 3em — получаем шрифт втрое больше, чем главный шрифт страницы для конкретного устройства.

Контент в помощь! 4 кейса

Робот сочинит описания карточек товаров.

Как ИИ помог в масштабировании контента и продвижении интернет-магазина стройматериалов.

Читать кейс

Читать кейс

Продвижение сети компьютерных клубов для молодежи

На несколько месяцев мы погрузились в мир геймерства, турнирных таблиц, движа и задорного вайба.

Читать кейс

Читать кейс

Вырастили конверсии в блоге в 16,5 раз

Как создавался блог Kokoc Performance, как мы шли к дистрибуции контента и какие результаты получили спустя 3 года работы.

Читать кейс

Читать кейс

Qugo: вырастили трафик из блога платформы b2b в 9,7 раз!

Молодой сайт, сложная тематика b2b, крупные конкуренты — с такими вводными трафик и позиции оставляли желать лучшего. Но бы добились цели: повысили трафик и позиции, улучшили узнаваемость бренда

Читать кейс

Читать кейс

1/4

Практика. Как сделать адаптивную верстку на примере

Представим, что нам нужно сверстать вот такой адаптивный макет, разберем как это сделать по шагам:

Шаг №1 - создаем html файл

Формируем скелет будущей html страницы.

Добавьте в head:

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

<div class="container">
  <main class="main">
    MAIN
  </main>
  <aside class="aside">
    ASIDE
  </aside>
</div>

Шаг №2 - добавляем тег <style>

В начало созданного html файла добавляем тег <style> — для определения стилей компонентов страницы. Делаем отступ 0 и добавляем гибкий контейнер (display: flex и flex-wrap: wrap). Затем указываем ширину и минимальную высоту (в пикселях) для элементов aside и main:

body {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.aside, .main {
  width: 100%;
  min-height: 1px;
}

Шаг №3 - формируем размеры блоков для мин. разрешения 992px

Вводим первый медиазапрос, чтобы указать минимальную ширину элемента (992px) и добавить параметры aside (flex: 33,3% или <=992px) и main (flex: 66,6 %):

@media (min-width: 992px) {
  .aside {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    order: 1;
  }
  .main {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    order: 2;
  }
}

Шаг №4 - формируем размеры блоков для мин. разрешения 1400px

Вводим второй медиазапрос — указываем минимальную ширину элемента 1400px и аналогично прописываем aside (flex и max-width: 25%) и main (flex и max-width: 75%):

@media (min-width: 1400px) {
  .aside {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .main {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

Шаг №5 - итоговый html файл

В итоге, целый код может выглядеть следующим образом:

<style>
body {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.aside, .main {
  width: 100%;
  min-height: 1px;
}
@media (min-width: 992px) {
  .aside {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    order: 1;
  }
  .main {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    order: 2;
  }
}
@media (min-width: 1400px) {
  .aside {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .main {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
</style>

<div class="container">
  <main class="main">
    MAIN
  </main>
  <aside class="aside">
    ASIDE
  </aside>
</div>

Синтаксис

Давайте закрепим то, что мы делали в примере выше. Начнем с синтаксиса.

Синтаксис подразумевает ввод медиазапроса через правило @media. Условия разделяется оператором (not, and, or), далее указываются параметры. Ширина, высота, ориентация страницы, соотношения разных элементов, либо разрешение экрана — все это параметры @media.

Для resolution (разрешение экрана) допустимо использовать любую из 3 единиц: dppx, dpi или dpcm (кол-во точек на пиксель / дюйм / сантиметр соответственно).

Для width разрешено задать минимальную и максимальную ширину. Аналогично — для heights (высоты) и aspect-ratio (форматного соотношения). Свойство CSS aspect-ratio позволяет создавать блоки с пропорциональными размерами, при этом высота и ширина блока автоматически рассчитываются как соотношение.

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;

Образцы значений для aspect-ratio

Стандартное значение orientation в адаптивной верстке — горизонтальное (альбомный лист) или вертикальное.

Пример

Чтобы вышеуказанные правила лучше усвоились, предлагаем ознакомиться с кодом, который используется для установления ширины по правилам адаптивной верстки:

@media all (min-width: 1200px) {
  div {
    width: 800px;
  }
}
@media all (min-width: 400px) {
  div {
    width: 350px;
  }
}

А этот код указывает ширину и высоту страницы:

@media screen and (min-aspect-ratio: 239/100) {
  main {
    height: 80%;
  }
}

Плотность пикселей, ориентация страницы задаются аналогично.

Размер элементов в адаптивной верстке

Аналогичным образом (при помощи указания минимального и максимального значения) прописываются размеры компонентов на странице. Взгляните на этот фрагмент:

div {
  height: 70%;
  max-height: 1900px;
}

Мы установили максимальную высоту для элемента 1900 px. Также обратите внимание на указание height в процентах.

В указании размера элементов нет ничего нового:

• max-height — максимальная высота.
• max-width — максимальная ширина.

С минимальными значениями все аналогично: min-height и min-width по высоте и ширине, соответственно.

Адаптивная верстка изображений

До сих пор мы говорили об элементах документа обобщенно. Пусть это и очевидно, но необходимо упомянуть правила верстки изображений. Чтобы создать адаптивное изображение, задайте максимальную ширину элемента — например, 100 %:

img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

Таким образом мы уточнили: максимальная ширина картинки должна составляет 100% от родительского контейнера, а не от всего экрана.

Адаптивные изображения могут быть весьма эффективными, но есть у них и недостаток: физический размер файла не уменьшается. Поэтому не стоит ожидать значительного уменьшения скорости загрузки страницы даже при глобальной замене обычных изображений на адаптивные.

Что делать, если нет поддержки CSS3. Альтернативы адаптивной верстке

Используйте прогрессивное улучшение: базовая функциональность без JS, адаптация стилями через @media/@container. Тестируйте критические сценарии в современных браузерах и на реальных устройствах.

Контент-маркетинг. Не «просто тексты»

• Привлечение новых клиентов
• Повышение лояльности текущих клиентов
• Повышение узнаваемости бренда
• Улучшение позиций в поиске

Узнать больше

Резюме: главные законы

Чтобы не запутаться в основных моментах, давайте подытожим все, о чем мы сказали выше.

1. Размер компонентов страницы

Он адаптируется в зависимости от устройства пользователя. Самый простой пример — кнопка. На большом экране десктопа она может быть совсем небольшой, попасть по ней курсором не составит труда. Но на экране мобильного устройства кнопка небольшого размера или неудобное навигационное меню сильно ухудшает юзабилити: по ним элементарно нельзя нажать. Адаптивная верстка решает и такие моменты, связанные с размерностью компонентов.

2. Стабильность + гибкость

Дизайн страницы может изменяться для очень маленьких экранов, но в целом ее внешний вид должен оставаться идентичным. Тем не менее, если мелкие элементы из самой крупной версии сайта не используются, их допустимо скрывать для небольших разрешений.

3. Оптимизация изображений

Медиафайлы, особенно изображения, должны использовать компрессию. Вектор — для малодетализированных изображений, растр — для высокодетализированных.

4. Относительность — камертон

Размер медиа-элементов задается относительно области просмотра (viewport). Например, картинка с фиксированным разрешением 360 пикселей совершенно по-разному выглядит на экране смартфона и Full HD-монитора, поэтому используются относительные единицы.

5. Шрифты в адаптиве

Для шрифтов используются отзывчивые единицы измерения (rem, em, vw) и веб-форматы (WOFF2), которые обеспечивают быструю загрузку и корректное отображение на всех устройствах.

6. Вложенность

Возможна отправка двух блоков в один контейнер, но при условии, что между ними существует взаимосвязь. Самые частые примеры: навигационные кнопки или, например, лого компании в шапке сайта.

Чек-лист: что нужно знать, прежде чем внедрять адаптивный дизайн

1. Кроссбраузерность. Да, даже в 2026 году об этом приходится говорить. Убедитесь, что сайт будет ее поддерживать. За этим нужно обязательно проследить, чтобы юзабилити оставалось высоким независимо от того, какой браузер использует пользователь.
2. Акцент на один тип устройств. При разработке дизайна сделайте акцент на конкретный тип устройств, который приносит сайту наибольшую посещаемость.
3. Учитывайте масштаб сайта. Если речь идет об одностраничном лендинге, заточенном изначально только под мобильный трафик, нет особого смысла создавать сложный адаптивный дизайн. Можно создать универсальную мобильную версию под все типы устройств.
4. Адаптив или мобильная версия. Еще раз оцените функциональность и дизайн существующего сайта. Возможно, мобильная версия будет приемлемым вариантом на первоначальном этапе.
5. Сохранение функций. Если на сайте сложный функциональный элемент и его нужно сохранить для мобильных пользователей, путь только один — адаптивность.
6. Сохранение дизайна. Когда дизайн сайта целиком основан на слайдерах или больших фоновых изображениях, его придется значительно переработать, так как подобные элементы неизбежно будут страдать в адаптивном воплощении.
7. Тестинг, тестинг, тестинг. Обязательно проверяйте корректность поведения страницы на разных типах устройств. Смотрите, как ведут себя все важные элементы, например, кнопки в контактной форме. Нельзя отправлять верстку разработчикам, пока страница и все ее компоненты не будут протестированы для всех важных типов устройств.

При технических сложностях (или ограниченном бюджете, например) можно сделать сайт адаптивным частично: например, проработать только главные разделы и страницы, которые обеспечивают наибольшую посещаемость.