Адаптивная вёрстка: медиазапросы, брейкпоинты и mobile first

Суть в одном абзаце

Адаптивный сайт — это одна вёрстка, которая подстраивается под ширину экрана. Работает это на трёх вещах: тег viewport, гибкие размеры (проценты, fr, clamp()) и медиазапросы, которые меняют раскладку на определённых ширинах. Самый надёжный порядок — mobile first: сначала стили для узкого экрана, затем дополнения для широких.

Шаг 1. Тег viewport

Без него мобильный браузер отрисует страницу как десктопную и уменьшит её. Медиазапросы при этом будут работать не так, как вы ожидаете.

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

Не запрещайте масштабирование через user-scalable=no — это мешает людям, которым нужно увеличивать текст.

Шаг 2. Mobile first

Базовые стили пишутся для мобильных без медиазапросов. Для больших экранов добавляются правила через min-width.

.layout {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px 1fr;
  }
}

Почему так лучше:

• Мобильная версия получается простой: одна колонка, минимум переопределений.
• Сложность добавляется, а не отменяется, поэтому CSS короче.
• Вы с самого начала думаете о главном контенте, а не о декоре.

Шаг 3. Как выбрать брейкпоинты

Ориентироваться на конкретные модели телефонов бессмысленно — устройств слишком много. Правильный подход: брейкпоинт ставится там, где ломается контент.

1. Откройте страницу и медленно растягивайте окно от узкого к широкому.
2. Как только строки становятся слишком длинными, карточкам становится тесно или появляется пустота — это место для брейкпоинта.
3. Держите их немного: обычно хватает двух-четырёх на весь проект.
4. Храните значения в одном месте — в переменных препроцессора или в конфиге фреймворка.

Используйте em или rem в медиазапросах, если хотите, чтобы раскладка учитывала пользовательский размер шрифта.

Шаг 4. Fluid-типографика через clamp()

Вместо нескольких размеров шрифта на разных брейкпоинтах можно задать плавное масштабирование с ограничениями:

h1 {
  font-size: clamp(2rem, 1.2rem + 4vw, 4.5rem);
}

clamp(минимум, желаемое, максимум) — заголовок растёт вместе с экраном, но не становится меньше минимума и больше максимума. Добавка в rem к vw важна: она сохраняет реакцию на масштаб в браузере.

Шаг 5. Container queries

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

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

@container (min-width: 420px) {
  .card {
    display: grid;
    grid-template-columns: 160px 1fr;
  }
}

Правило простое: медиазапросы — для раскладки страницы, container queries — для компонентов.

Остальное, что легко забыть

• Изображения: max-width: 100%; height: auto;, а для разных экранов — srcset и sizes.
• Зоны нажатия: кнопки и ссылки должны быть достаточно крупными для пальца.
• Hover: на тач-устройствах наведения нет, проверяйте через @media (hover: hover).
• Таблицы: оборачивайте в контейнер с горизонтальной прокруткой.
• Высота экрана: на мобильных 100vh может вести себя неожиданно из-за панелей браузера, есть единицы dvh и svh.

Как тестировать

1. DevTools — режим устройств удобен для быстрой проверки, но это эмуляция.
2. Реальные устройства — хотя бы один недорогой Android и один iPhone. Только на них видны реальная скорость, шрифты, клавиатура и жесты.
3. Промежуточные ширины — не только популярные, но и «между» брейкпоинтами.
4. Альбомная ориентация и увеличенный шрифт в настройках системы.