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

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

Респонсивная вёрстка: один HTML, медиа-запросы в CSS

Респонсив (от англ. responsive — отзывчивый) — это когда у сайта одна разметка и один CSS-файл на всех. Перестраивается всё за счёт медиа-запросов — правил в CSS, которые активируются при определённых условиях: ширина окна, ориентация устройства, плотность пикселей.

Классический пример — перестроить трёхколоночную сетку в одноколоночную на узком экране:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* до 768px ширины — одна колонка */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

HTML при этом один и тот же:

<div class="grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

Браузер сам решает, какую версию стилей применить. Открой страницу на 1920px — увидишь три колонки. Сожми окно до 600px — одна колонка. Брейкпоинты (точки, в которых меняется раскладка) разработчик выбирает по дизайну: обычно 480px для мобильных, 768px для планшетов, 1024px для десктопа.

В медиа-запросах можно проверять не только ширину. Несколько частых параметров:

@media (min-width: 1024px) { /* десктоп */ }
@media (orientation: landscape) { /* альбомная ориентация */ }
@media (prefers-color-scheme: dark) { /* тёмная тема системы */ }
@media (hover: none) { /* устройство без курсора — тач */ }

Адаптивная вёрстка: разный HTML/CSS под устройство

Адаптив (от англ. adaptive — приспосабливающийся) — противоположная стратегия. Сервер заранее определяет тип устройства пользователя (по User-Agent — это строка-идентификатор, которую браузер посылает в каждом HTTP-запросе) и отдаёт разную вёрстку: один HTML+CSS для десктопа, другой — для мобильного, третий — для планшета.

На уровне сервера это выглядит примерно так (псевдокод):

// определяем устройство по User-Agent
const ua = request.headers['user-agent'];

if (/Mobile|Android|iPhone/i.test(ua)) {
  return renderTemplate('mobile.html', data);
}
if (/iPad|Tablet/i.test(ua)) {
  return renderTemplate('tablet.html', data);
}
return renderTemplate('desktop.html', data);

У каждого шаблона — своя структура HTML и свой CSS. Мобильная версия может полностью скрывать сайдбар, упрощать навигацию до бургер-меню, использовать другую иерархию заголовков. Десктопная — показывать всё.

Иногда адаптив реализуют чисто на фронтенде через подключение разных CSS по медиа-атрибуту тега <link>:

<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">

Браузер скачает все три файла (атрибут media не блокирует загрузку, только применение), но применит только подходящий по условию. Это компромиссный гибрид: HTML один, но стили — разные физические файлы.

Сравнение бок о бок

Чтобы все различия были перед глазами разом:

Когда выбирать респонсив

Респонсив — вариант по умолчанию для большинства задач. Он подходит когда:

• Контент одинаковый на всех устройствах. Блог, корпоративный сайт, лендинг, документация — пользователь должен видеть то же самое, просто в адаптированной раскладке.
• Команда небольшая и одна. Разделять кодовую базу на отдельные шаблоны — значит платить за это поддержкой. Маленькой команде это не нужно.
• SEO критично. Google официально рекомендует респонсив — одна URL, один HTML, никаких канонических конфликтов. Поисковый робот видит сайт в той же конфигурации что и десктопный пользователь.
• Бюджет на разработку ограничен. Один шаблон — одна работа. Адаптив с тремя шаблонами — примерно тройной объём вёрстки.

Когда выбирать адаптив

Адаптив выигрывает в нескольких сценариях, где респонсив доходит до своего потолка:

• Сильно разный UX на разных устройствах. Например, мобильная версия — для быстрых заказов, десктопная — для подробного сравнения товаров. Когда контент и взаимодействие принципиально разные, респонсив не справится без костылей.
• Высокая аудитория одного из устройств. Если аналитика показывает, что 80% трафика — мобайл, имеет смысл отдавать им только мобильный CSS, экономя на загрузке.
• Низкая пропускная способность ключевой аудитории. В регионах с медленным интернетом важен каждый лишний килобайт. Адаптивный мобильный CSS, в котором нет десктопных правил, весит меньше.
• Сложная серверная логика и так есть. Если на сервере уже определяется устройство для других целей (выбор бэкенда, A/B-тесты), добавить отдачу разного HTML — не лишняя работа.

Современная практика — редко делать чистый адаптив. Чаще встречается гибрид: респонсивная вёрстка как база + адаптивная выдача для пары критичных мест (например, отдельная оптимизированная страница для мобильного чекаута).

Размытая граница: что между ними сегодня

Долгое время респонсив и адаптив были чёткими антагонистами. За последние пять-семь лет в CSS появились инструменты, которые позволяют делать «частичный респонсив» — настолько умную вёрстку, что многие задачи адаптива решаются на одном HTML без брейкпоинтов вообще.

Container queries — правила, которые срабатывают не на ширину окна, а на ширину конкретного контейнера. Карточка товара может перестраиваться по своей ширине независимо от того, лежит она в сайдбаре или в основной колонке:

.card-wrapper {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

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

Функция clamp() — плавная интерполяция между минимумом и максимумом без брейкпоинтов:

h1 {
  /* минимум 24px, максимум 48px, в пересчёте 4% от ширины окна */
  font-size: clamp(24px, 4vw, 48px);
}

Раньше для такого писали 3-4 медиа-запроса для разных диапазонов. Теперь одна строка делает то же самое плавно.

CSS Grid с minmax и auto-fit — сетка, которая сама подстраивает количество колонок:

.grid {
  display: grid;
  /* колонки минимум 250px, максимум 1fr; столько штук, сколько влезает */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

На широком экране — 4 колонки. На узком — 2. На совсем узком — 1. Без единого медиа-запроса.

С этими инструментами разделение «респонсив vs адаптив» теряет резкость. В новых проектах чаще пишут так: респонсивная вёрстка с container queries и clamp() для общей раскладки + точечный адаптив там, где без него совсем плохо.

Итог

Респонсив — один HTML и один CSS на всех. Медиа-запросы решают, как именно отобразить страницу под текущую ширину окна. Проще в разработке и поддержке, лучше для SEO, рекомендуется по умолчанию.

Адаптив — разный HTML/CSS под разные устройства, выбор делается на сервере или через media-атрибут <link>. Сложнее в разработке, но точнее под устройство, меньше лишнего кода у пользователя. Имеет смысл когда UX между устройствами сильно отличается, или когда производительность критична для конкретной аудитории.

В современных проектах чаще встречается гибрид: респонсивная база с использованием новых CSS-инструментов (container queries, clamp(), auto-fit) для большинства экранов, плюс точечный адаптив для отдельных критичных страниц. Это даёт лучшее из обоих миров: простоту поддержки респонсива и контроль адаптива там, где он действительно нужен.