Практика адаптивной вёрстки

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

Уровень: средний 10 разделов 2 часа

1. Повторный сценарий: контент решает

Адаптив — не перерисовка макета под три ширины, а выбор правил под конкретный экран. Начните с вопросов: что на мобильном важно увидеть первым? Что можно спрятать, что перенести вниз, как сузить сетку без боли.

пишите мобильную версию первой — важное не потеряется;
напоминание: базовые стили (лёгкие) > @media (min-width) добавления;
элементы, которые должны быть везде, — не скрывайте.

2. Типовой гамбургер-меню

Мобильное меню часто прячут за бургером. Простой вариант без JS — чекбокс + соседние селекторы; сложный — JS-класс. Начнём с чекбокса.

<input type="checkbox" id="nav" class="nav-toggle">
<nav class="nav">
  <label for="nav" class="nav-burger">☰</label>
  <ul class="nav-list">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Каталог</a></li>
  </ul>
</nav>

.nav-list { display: none; }
.nav-toggle:checked ~ .nav .nav-list { display: block; }

@media (min-width: 768px) {
  .nav-burger { display: none; }
  .nav-list { display: flex; }
}

Для доступности скрывайте чекбокс через position: absolute + opacity: 0, а label держите видимым.

3. Ломающиеся сетки

Решётка, которая «перетечёт» без медиазапросов: repeat(auto-fit, minmax(240px, 1fr)) создаёт столько колонок, сколько влезает. Минимум перерывов.

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

auto-fit сужает колонки, auto-fill сохраняет число;
minmax(240px, 1fr) — «не меньше 240px, растёт равномерно»;
медиазапросы остаются точечно: 2/3 колонки в героях, меню и пр.

4. Текстовый масштаб: clamp

.hero__title { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.5rem); }
.section-title { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }

clamp избавляет от «двухкратных» переопределений шрифта в брейкпоинтах: минимальный, плавающий и максимальный размер — одно правило.

5. Мобильные размеры touch-элементов

кнопки и ссылки меню — высота 40–44px и target (кликабельная зона);
интервалы 48–64px между переключателями;
25–46px+ для полей форм на телефоне.

.btn { min-height: 42px; padding: 0 16px; }

6. Адаптивные изображения и видео

media-запросы выбирают и медиа: video с лёгким poster на мобильных, картинку с srcset под экран, ленивую загрузку для не сразки-видимых фото.

<img src="s.png" srcset="s.png 400w, m.png 800w, l.png 1200w"
     sizes="(max-width: 500px) 100vw, 50vw" alt="Товар">
<video poster="mini.jpg" preload="none"></video>

srcset управляет размером загрузки, picture — форматом/обрезкой;
preload: none на мобильных — экономия трафика;
defer JS ниже по документу не блокирует первый экран.

7. Навигация и шапка на узком экране

.header { display: flex; align-items: center; gap: 12px; }
.header__cta { margin-left: auto; }

@media (max-width: 600px) {
  .header__cta { display: none; }      /* не место важным действиям */
  .header__logo { font-size: 1.1rem; }
}

На мобильном сильная привязка к основному экрану: действия «купить/связаться» выносите в плавающую клавишу, а не в шапку.

8. Плавающие действия

.fab {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #2563eb; color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}
@media (min-width: 900px) { .fab { display: none; } }

9. Проверка мелочей

текст без горизонтального скролла: overflow-x: hidden на body — временная костыль;
поля форм >= 40px на тач-устройствах;
доступная подсветка активного пункта;
тест: выключенный JavaScript — сайт всё ещё навигационен.

overflow-x: hidden «прячет» проблему, а не решает: если из экрана вылезает ширина — ищите причину (минмимо под широкую строку, картинку без max-width).

10. Чек-лист адаптивного проекта

мобильная версия — базовая, десктопы — добавления;
сетки через auto-fit/minmax, брейкпоинты по контенту;
шрифты/отступы через clamp и rem;
меню раскрывается и доступно по клавиатуре;
медиа грузятся под экран;
тач-зоны и контраст — в порядке;
реальные устройства и тест без JS.

Что дальше

Курс завершён.

← Вернуться к курсам