Кратко: отзывчивый (responsive) дизайн — это плавная, «жидкая» верстка, которая подстраивается под любую ширину экрана с помощью гибких сеток и медиа-запросов; адаптивный (adaptive) — набор заранее спроектированных макетов (фиксированных или частично гибких) для нескольких конкретных ширин/классов устройств, между которыми интерфейс переключается.
Примеры на HTML/CSS/JS
1) Отзывчивый (responsive)
- Идея: проценты/flex/grid, изображения с max-width, несколько медиа‑запросов для тонкой настройки.
- Пример CSS (основная логика):
/* fluid layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.row { display: flex; flex-wrap: wrap; }
.col { flex: 1 1 300px; min-width: 220px; }
/* изображения гибкие */
img { max-width: 100%; height: auto; }
/* медиа‑запрос для мелких экранов */
@media (max-width: 768px) {
.col { flex-basis: 100%; }
.nav { display: none; }
}
- Поведение: элементы плавно изменяют размеры и переносятся по мере сжатия/растяжения окна.
2) Адаптивный (adaptive)
- Идея: несколько отдельных макетов (например: мобильный/планшет/десктоп) — каждый оптимизирован для конкретной ширины/контекста.
- Подходы: серверная отрисовка разных шаблонов, динамическая подгрузка отдельных CSS/HTML через JS.
- Пример (упрощённо, JS выбирает шаблон):
window.addEventListener('DOMContentLoaded', () => {
const w = window.innerWidth;
if (w >= 1024) {
loadLayout('desktop.html');
} else if (w >= 768) {
loadLayout('tablet.html');
} else {
loadLayout('mobile.html');
}
}); - Поведение: для каждой «категории» устройства используется своя разметка/стили, часто более оптимизированная UX.
Критерии выбора подхода
- Сложность и различие UX между устройствами:
- Если интерфейс и поток задач практически одинаковы на всех экранах → предпочитать отзывчивый дизайн.
- Если мобильный и десктоп требуют принципиально разных интерфейсов/функций → адаптивный (отдельные макеты).
- Производительность и экономия трафика:
- Нужна минимальная загрузка на мобильных → адаптив (сервер/JS отдает лёгкий мобильный шаблон, меньше ресурсов).
- Обычная загрузка и кэширование → отзывчивый (один набор ресурсов).
- Время разработки и поддержка:
- Ограничен ресурс разработки → отзывчивый проще поддерживать (одна кодовая база CSS/HTML).
- Можно инвестировать в несколько оптимизированных версий → адаптив требует больше поддержки.
- Контентная плотность и дизайн-системы:
- Контент гибкий, числа/карты/таблицы → отзывчивый с гибкой сеткой.
- Контент требует кардинальной перестройки (меню, потоки задач) → адаптив.
- Аудитория и устройства:
- Большая доля пользователей с очень старых/редких экранов или специфических устройств → адаптив с таргетом на реальные размеры.
- Широкий спектр современных устройств → отзывчивый покрывает большинство кейсов.
Рекомендации/практика
- Часто используют гибрид: базовая отзывчивость + адаптивные оптимизации (lazy load, замена тяжелых блоков для мобильных, критические изменения через условные шаблоны).
- Типичные опорные точки (рекомендация): $320\text{px}$ — малые телефоны, $768\text{px}$ — планшеты, $1024\text{px}$ — десктоп/широкие планшеты. Но выбирать на основе аналитики устройств ваших пользователей.
- Тестируйте на реальных устройствах и учитывайте плотность пикселей, сетевые условия и удобство ввода (тач vs мышь).
Коротко: для большинства проектов начните с отзывчивого дизайна + целевых адаптивных оптимизаций там, где UX или производительность этого требуют.