Адаптивная верстка: от мобильного к десктопу
Больше половины трафика идет с телефонов. Если ваш сайт криво отображается на смартфоне, пользователи просто закроют вкладку и уйдут к конкурентам. Адаптивность — это не опция, а необходимость.
Проблема в том, что экранов тысячи: от iPhone SE с его 320 пикселями до 4K-мониторов. Нельзя создать отдельный макет для каждого устройства. Нужен гибкий подход, когда контент подстраивается под любую ширину экрана.
Mobile-first стратегия
Начинаем с дизайна для маленького экрана, затем расширяем для планшетов и десктопов. Это логичнее, чем пытаться впихнуть десктопный макет в мобильную версию. На телефоне важна простота: один столбец текста, крупные кнопки, минимум лишних элементов.
По мере увеличения ширины экрана добавляем колонки, боковые панели, более сложную навигацию. Медиа-запросы определяют точки перелома, где макет меняется. Типичные breakpoints: 768px для планшетов, 1024px для десктопов.
Гибкие единицы измерения — ключ к адаптивности. Проценты для ширины, rem для шрифтов, vh/vw для полноэкранных секций.
Реальные кейсы
Разберем навигационное меню, которое на мобильном прячется в гамбургер, а на десктопе растягивается в горизонтальную полоску. Или карточки товаров: одна в ряд на телефоне, три на планшете, четыре на широком экране.
Изображения — отдельная история. На мобильном нет смысла грузить картинку в 4K разрешении. Используем srcset и picture для подгрузки разных версий в зависимости от размера экрана и плотности пикселей.
Еще один аспект — производительность. Тяжелые шрифты, огромные изображения, неоптимизированный CSS замедляют загрузку на медленном мобильном интернете. Научитесь профилировать страницы через Lighthouse и исправлять узкие места.
План занятий
- Принципы адаптивного дизайна: fluid grids, flexible images, media queries
- Mobile-first подход: проектирование от малого к большому
- CSS Grid для сложных многоколоночных макетов
- Flexbox для компонентов: навигация, карточки, футеры
- Медиа-запросы: breakpoints, orientation, resolution
- Относительные единицы: em, rem, vw, vh, процент
- Адаптивные изображения: srcset, sizes, picture
- Viewport и meta-теги для корректного масштабирования
- Touch-friendly интерфейсы: размер кнопок, отступы
- Производительность: минификация, ленивая загрузка, critical CSS
- Тестирование на реальных устройствах и эмуляторах
- Accessibility: навигация с клавиатуры, screen readers, контрастность
Финальная работа
Многостраничный сайт с адаптивным дизайном, протестированный на десяти различных устройствах. Включает главную, каталог, карточку товара, форму заказа.