Адаптивный дизайн
Адаптивный дизайн — подход к проектированию сайтов, при котором интерфейс автоматически перестраивается под размер экрана: десктоп, планшет, смартфон. Один HTML, разные раскладки.
Определение адаптивного дизайна
Адаптивный дизайн (responsive design) — технология вёрстки, при которой одна страница автоматически адаптирует расположение элементов, размер шрифтов и навигацию под ширину экрана пользователя. Термин ввёл Итан Маркотт в статье на A List Apart в 2010 году. К 2024 году по данным StatCounter мобильный трафик составляет 56% всего веб-трафика в мире и 58% в РФ. Сайт без адаптива теряет половину аудитории и автоматически проседает в поисковой выдаче Яндекса и Google.
Как работает адаптивный дизайн
Реализация — через CSS media queries, гибкую сетку (flexbox, CSS Grid) и относительные единицы (%, rem, vw вместо фиксированных px). Дизайн проектируется в трёх–пяти брейкпойнтах: 320–480 px (мобайл), 481–768 px (большой мобайл/маленький планшет), 769–1024 px (планшет), 1025–1440 px (десктоп), 1441+ (широкоформатный). Стандартный подход — mobile-first: сначала проектируется мобильная версия, потом расширяется до десктопа. Адаптивный дизайн — обязательный этап разработки сайта и часть общего фирменного стиля: на всех устройствах бренд должен выглядеть одинаково узнаваемо.
| Брейкпойнт | Ширина | Типичные устройства |
|---|---|---|
| Mobile S | 320–480 px | iPhone SE, бюджетные Android |
| Mobile L | 481–768 px | iPhone Pro, средний Android |
| Tablet | 769–1024 px | iPad, Android-планшеты |
| Desktop | 1025–1440 px | ноутбуки, средние мониторы |
| Wide | 1441+ px | 24"+ мониторы, 4K |
Связанные концепции
- UX — на мобильном пользовательский путь короче и менее терпелив; адаптив должен учитывать пальцы (touch-зоны 44×44 px минимум) и одно направление скролла.
- UI — визуальная составляющая дизайна, которая в адаптиве масштабируется и перестраивается по правилам.
- Mobile-first — подход проектирования: сначала мобильная версия, потом расширение на десктоп; стандарт с 2015 года.
- Core Web Vitals — Google измеряет CWV отдельно на мобильных и десктопе, и для мобильной выдачи использует только мобильные метрики.
- Viewport meta-tag — `<meta name="viewport" content="width=device-width, initial-scale=1">`; без него адаптив не работает на смартфонах.
Частые вопросы
Чем адаптивный дизайн отличается от мобильной версии?
Адаптивный — один HTML с CSS-правилами под разные экраны, одна копия сайта. Мобильная версия (m.example.com) — отдельный сайт с дублированным контентом, поддерживается параллельно. С 2018 года Google индексирует mobile-first, и адаптив — рекомендуемый подход. Отдельная m-версия осталась только у некоторых крупных порталов. Разработка адаптивных сайтов в BigPanda.
Сколько брейкпойнтов нужно?
Минимум три: мобайл, планшет, десктоп. Современный стандарт — 4–5 брейкпойнтов с учётом крупных мониторов 1920+ px. Бутстрап использует 5 брейкпойнтов (xs, sm, md, lg, xl), Tailwind CSS — 5 по умолчанию. Меньше 3 — критические проблемы на промежуточных устройствах. Больше 6 — переусложнение поддержки.
Какой размер шрифта на мобильном?
Минимум 16 px для основного текста (iOS Safari ниже 16 px автоматически зумит ввод формы). Заголовок H1 — 24–32 px. Кнопки — высотой минимум 44 px (Human Interface Guidelines Apple). На десктопе шрифты увеличиваются на 20–40%, отступы — на 50–100%.
Что делать с таблицами на мобильном?
Три подхода: 1) горизонтальный скролл всей таблицы (overflow-x: auto); 2) карточный вид — каждая строка превращается в карточку с парами «название колонки: значение»; 3) скрытие неприоритетных колонок через `display: none` в media query. Для больших данных предпочтителен карточный вид.
Как тестировать адаптивный дизайн?
Минимум: DevTools Chrome/Firefox (около 20 пресетов устройств). Полное тестирование — на реальных устройствах (минимум 1 iPhone, 1 Android, 1 планшет). Облачные сервисы: BrowserStack (от $39/мес), LambdaTest. Перед запуском обязательна проверка в Яндекс Браузере на мобильном — у него специфичная отрисовка некоторых CSS-свойств.