Что такое адаптивная вёрстка
Адаптивная вёрстка - вёрстка сайта, которая автоматически подстраивается под разные размеры экранов. Одна и та же страница корректно отображается на смартфоне (375px), планшете (768px), ноутбуке (1440px) и большом мониторе (1920px и выше). Без отдельной мобильной версии.
Адаптивная вёрстка простыми словами
Это сайт, который "умеет" подстраиваться под устройство. На телефоне меню превращается в гамбургер-меню, текст становится крупнее, кнопки увеличиваются. На компьютере - всё разворачивается в полный размер. Один код, разные представления.
Как работает технически
В CSS используются медиа-запросы (media queries) - правила вида "если ширина экрана меньше 768 пикселей, используй такие стили". Дизайнер заранее задаёт макеты для контрольных разрешений, верстальщик переводит их в код с медиа-запросами.
Контрольные разрешения экранов в 2026
- Мобильный. 375px, 414px (iPhone), 360px, 412px (Android)
- Планшет. 768px (iPad mini), 1024px (iPad)
- Ноутбук. 1280px, 1440px (MacBook)
- Десктоп. 1920px (Full HD), 2560px (2K)
Минимум - макеты под 3 контрольных разрешения: мобильный, планшет, десктоп. Хорошо - под 5: ещё крупный мобильный и большой десктоп.
Что меняется при адаптации
- Сетка раскладки. От 4 колонок на десктопе к 1 на мобильном.
- Размеры шрифтов. Крупнее на мобильном для читаемости.
- Размеры кнопок. Минимум 44 пикселя на мобильном для удобного тапа.
- Изображения. Загружаются меньшего размера для скорости.
- Меню. Превращается в гамбургер-меню.
- Таблицы. Сворачиваются в карточки или скроллятся горизонтально.
Принципы Mobile First
В 2026 году распространён подход Mobile First: дизайн и вёрстка начинаются с мобильной версии, потом расширяются под планшет и десктоп. 60-70% трафика приходит с мобильных, поэтому начинать с них логично.