Адаптивная вёрстка — это подход, при котором сайт автоматически подстраивается под размер экрана устройства. Не нужно создавать отдельные версии для телефонов, планшетов и компьютеров. Один код работает везде. Это стало стандартом потому, что люди используют десятки разных устройств с экранами от 320px до 4K.
Что такое адаптивность на самом деле
Многие думают, что адаптивность — это просто изменение размеров элементов. На деле это целая философия проектирования. Хороший адаптивный сайт не просто сжимается, а перестраивает интерфейс под конкретное устройство. На телефоне навигация превращается в гамбургер-меню, на планшете — в компактную панель, на десктопе — в полноценную горизонтальную строку.
Основные инструменты адаптивной вёрстки
Есть три кита, на которых держится современная адаптивность:
- Медиазапросы (media queries) — позволяют применять разные стили CSS в зависимости от характеристик устройства
- Flexbox — модель layout для одномерного расположения элементов
- CSS Grid — двухмерная система сеток для сложных макетов
Медиазапросы — это условия. Например:
@media (max-width: 768px) { .container { padding: 10px; }
}Этот код говорит: «Если ширина экрана меньше 768px, уменьши отступы контейнера».
Типичные ошибки разработчиков
Даже опытные разработчики часто ошибаются в адаптивной вёрстке. Вот самые частые проблемы:
| Ошибка | Последствие | Решение |
|---|---|---|
| Фиксированные размеры в пикселях | Элементы не масштабируются на маленьких экранах | Использовать относительные единицы (%, rem, vw) |
| Отсутствие mobile-first подхода | Сложность поддержки и избыточный код | Начинать проектирование с мобильной версии |
| Игнорирование touch-интерфейсов | Неудобное использование на сенсорных устройствах | Увеличивать области клика для пальцев |
| Неоптимизированные изображения | Медленная загрузка на мобильных сетях | Использовать srcset и picture |
Практическое сравнение подходов
Есть два основных подхода к адаптивности: mobile-first и desktop-first. Mobile-first означает, что вы сначала создаёте версию для мобильных, а потом добавляете стили для больших экранов. Desktop-first — наоборот.
Mobile-first считается современным стандартом по трём причинам:
- Проще развивать — добавлять стили легче, чем переписывать
- Лучшая производительность — не грузятся ненужные стили для больших экранов
- Соответствует статистике — больше трафика с мобильных устройств
Чек-лист проверки адаптивности
После верстки проверьте эти пункты:
- Сайт корректно отображается на ширинах 320px, 768px, 1024px, 1440px
- Все интерактивные элементы достаточно велики для касания пальцем (минимум 44×44px)
- Текст читается без zoom на мобильном устройстве
- Изображения не выходят за границы контейнеров
- Горизонтальной прокрутки нет
- Навигация доступна и удобна на всех размерах экрана
Адаптивная вёрстка — это не одноразовая задача, а процесс. Новые устройства с нестандартными размерами экранов появляются постоянно. Хороший подход — тестировать на реальных устройствах, а не только в эмуляторах.