Как сделать HTML-шаблон адаптивным под мобильные устройства

Скачали HTML-шаблон, открыли на компьютере — выглядит отлично. Открыли на телефоне — кнопки наползают, текст обрезан, форма не помещается. В 2026 году 60–80% трафика идёт с мобильных устройств, и неадаптивный сайт теряет большую часть аудитории. Если шаблон не адаптивный «из коробки» или адаптация работает плохо, её можно сделать самому без переписывания всего CSS. В этой статье — пошаговый разбор: что такое адаптивная вёрстка, как добавить мобильные стили в существующий шаблон и типичные приёмы.

Что такое адаптивная вёрстка

Адаптивная (responsive) вёрстка — техника, при которой одна страница HTML/CSS правильно отображается на любом размере экрана: от смартфона 320px до десктопа 1920px и больше.

Достигается за счёт:

Тега viewport — сообщает мобильным браузерам, как масштабировать страницу;
Media queries — CSS-правила, применяемые только на определённых размерах экрана;
Гибких единиц измерения — % вместо px;
Flexbox и CSS Grid — современных способов раскладки;
Адаптивных картинок — разный размер изображения для разных экранов.

Главное правило: сайт должен быть удобен на самом маленьком экране, а потом расширяться до больших. Это подход «mobile first».

Шаг 1. Тег viewport

Самая первая и обязательная строчка для любого адаптивного сайта. Без неё мобильные браузеры пытаются показать сайт как уменьшенную копию десктопа.

В секции <head>:

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

Параметры:

width=device-width — ширина страницы равна ширине устройства.
initial-scale=1.0 — начальный масштаб без приближения.

Большинство современных HTML-шаблонов уже имеют этот тег. Если у вас старый шаблон без него — добавьте первым делом.

Шаг 2. Media queries

Media queries позволяют применять CSS только при определённых условиях. Базовый синтаксис:

@media (max-width: 768px) {
  /* Стили применяются только на экранах шириной до 768px */
  .container {
    padding: 1rem;
  }
  h1 {
    font-size: 1.5rem;
  }
}

Пример: на десктопе колонки идут в ряд, на мобильном — друг под другом:

.row {
  display: flex;
  gap: 2rem;
}
.col {
  flex: 1;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
}

Контрольные точки (breakpoints)

Стандартные размеры экранов, на которых обычно нужно менять вёрстку:

Устройство	Ширина	Что меняется
Мобильные (портрет)	до 480 px	Колонки в столбец, крупные кнопки
Мобильные (ландшафт) / маленькие планшеты	481–768 px	Двухколоночные блоки
Планшеты	769–1024 px	Трёхколоночные блоки
Десктоп	1025–1440 px	Полная сетка
Большой десктоп	1441+ px	Ограничение ширины контента

Универсальные breakpoints для большинства сайтов: 768px и 1024px.

Flexbox и Grid вместо float

Старые шаблоны часто используют float: left для размещения колонок. Это сложно адаптировать. Современный подход — Flexbox и CSS Grid, которые адаптируются автоматически.

Flexbox

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.col {
  flex: 1 1 300px; /* минимум 300px, дальше растягивается */
}

На больших экранах колонки в ряд, на маленьких — автоматически переносятся вниз.

CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Число колонок меняется автоматически в зависимости от ширины контейнера. Минимум 300px, максимум — равные доли.

Относительные единицы измерения

Вместо абсолютных px для гибкости используйте относительные единицы.

% — процент от родителя.
rem — относительно базового размера шрифта (обычно 16px).
em — относительно размера шрифта родителя.
vw/vh — процент от ширины/высоты окна.
clamp(min, val, max) — значение в диапазоне.

Пример адаптивного шрифта без media queries:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Заголовок будет 5% ширины окна, но не меньше 1.5rem и не больше 3rem.

Адаптивные картинки

Простая адаптивность

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

Картинка никогда не выйдет за пределы контейнера, пропорции сохраняются.

Разные изображения для разных экранов

<picture>
  <source media="(max-width: 768px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="Главное изображение">
</picture>

Браузер сам выберет подходящее изображение — экономит трафик на мобильных.

Адаптивная навигация (бургер-меню)

На десктопе меню в строку. На мобильном — иконка-бургер, по клику разворачивается.

<nav>
  <div class="logo">Site</div>
  <button class="burger" onclick="document.querySelector('.menu').classList.toggle('open')">☰</button>
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

<style>
nav { display: flex; justify-content: space-between; align-items: center; }
.burger { display: none; font-size: 1.5rem; background: none; border: none; }
.menu { display: flex; gap: 1rem; list-style: none; }

@media (max-width: 768px) {
  .burger { display: block; }
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px; right: 0;
    background: white;
    padding: 1rem;
  }
  .menu.open { display: flex; }
}
</style>

Адаптивные таблицы

Таблицы на мобильных — частая проблема. Слишком широкие, не помещаются. Решения:

Горизонтальный скролл

.table-wrap { overflow-x: auto; }

<div class="table-wrap">
  <table>...</table>
</div>

Преобразование в карточки

На мобильном каждую строку показываем как блок:

@media (max-width: 768px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { margin-bottom: 1rem; border: 1px solid #ddd; padding: 0.5rem; }
  td:before { content: attr(data-label) ": "; font-weight: bold; }
}

<td data-label="Цена">1500 ₽</td>

Тестирование на разных устройствах

DevTools браузера. F12 → иконка устройства (Ctrl+Shift+M). Выбираете iPhone/iPad/Android из списка.
Реальные устройства. Откройте сайт на своём телефоне и планшете — даст самую честную картину.
BrowserStack, LambdaTest — сервисы для тестирования на сотнях устройств.
Google Mobile-Friendly Test — search.google.com/test/mobile-friendly. Проверяет адаптацию для Google.
responsivedesignchecker.com — показывает сайт в разных размерах.

Частые ошибки

Нет тега viewport. Без него все остальные приёмы не работают.
Фиксированные ширины. width: 1200px — на мобильном сайт обрезается.
Маленькие кнопки. Минимум 44×44 px — иначе попасть пальцем сложно.
Мелкий шрифт. Меньше 16px на мобильных — браузеры пытаются увеличить.
Горизонтальный скролл. Сайт «вылазит» за края экрана — чаще из-за изображений или фиксированных ширин.
Замена меню только цвета, без бургера. 10 пунктов меню в строку не помещаются на мобильном.
Pop-up на всю высоту экрана. Невозможно закрыть, если кнопка крестика за пределом видимости.
Hover-эффекты как основа. На тачскринах нет наведения — критичная функциональность не должна зависеть от hover.
Тяжёлые изображения для мобильных. Десктопное изображение 3 МБ грузится секундами.
Тестирование только в DevTools. Реальные мобильные браузеры могут отображать иначе.

FAQ

Что лучше: адаптивный сайт или отдельная мобильная версия (m.site.ru)?

Адаптивный. Отдельная мобильная версия — устаревший подход, требует поддерживать два сайта, плохо для SEO. Google уже много лет рекомендует адаптивную вёрстку как стандарт.

Можно ли сделать адаптивным сайт на Bootstrap?

Bootstrap изначально адаптивный — его сетка работает на любых экранах. Если шаблон на Bootstrap и не адаптивный, скорее всего убрали стандартные классы — верните их или используйте утилитарные классы типа col-md-6 col-lg-4.

Mobile first или desktop first?

Mobile first — пишите CSS сначала для мобильных, потом через media queries добавляете стили для больших экранов. Современный стандарт, заставляет думать о мобильной аудитории как о приоритете.

Нужны ли отдельные стили для планшетов?

Зависит от дизайна. Обычно планшет — что-то среднее: 2-колонки вместо 3 на десктопе и 1 на мобильном. Универсальный breakpoint планшета — 768–1024px.

Как протестировать на iPhone, если у меня Android?

DevTools браузера эмулирует iPhone. Для точности — BrowserStack или попросите коллегу с iPhone проверить. Различия обычно мелкие, основные ошибки видны и в эмуляции.

Адаптация — это сложно?

Для нового сайта на современном CSS (Flexbox, Grid) — нет, базовая адаптация добавляется парой media queries. Для старого сайта с float-вёрсткой — сложнее, иногда проще переписать заново.

Что важнее: красивая десктопная версия или удобная мобильная?

Мобильная. 60–80% трафика — оттуда. На десктопе посетитель прощает мелкие огрехи, на мобильном уходит мгновенно при первой проблеме.

Чек-лист адаптивности

☐ Добавлен тег <meta name="viewport">
☐ Базовый шрифт 16px или больше
☐ Используются Flexbox/Grid, а не float
☐ Картинки имеют max-width: 100%
☐ Меню превращается в бургер на мобильных
☐ Кнопки минимум 44×44 px
☐ Формы удобны для пальцев (большие поля)
☐ Таблицы либо скроллятся, либо превращаются в карточки
☐ Нет горизонтального скролла
☐ Pop-up имеют видимую кнопку закрытия
☐ Hover-эффекты не блокируют функциональность
☐ Изображения оптимизированы (WebP, разные размеры через picture)
☐ Проверено в DevTools (iPhone, iPad, Android)
☐ Проверено на реальном мобильном устройстве
☐ Прошло тест Google Mobile-Friendly

Заключение

Адаптивность HTML-шаблона — обязательное требование в 2026 году. Если шаблон не адаптивный, добавление нескольких media queries и переход на Flexbox/Grid решает большинство проблем. Полная переделка нужна только для совсем устаревших шаблонов на float-вёрстке.

Большинство современных шаблонов из каталога Zettabyte уже адаптивные — открываете, видите корректную работу на мобильном из коробки. А для размещения готового адаптивного сайта подойдёт любой тариф из подборщика хостингов.