Адаптивная веб-страница (Adaptive Web Design) имеет предопределенные макеты, которые переключаются в зависимости от ширины окна просмотра (viewport). При изменении размера экрана страница "приспосабливается" к новому размеру, загружая соответствующий макет.
Отзывчивая веб-страница (Responsive Web Design) использует гибкие сетки, изображения и медиа-запросы CSS для динамического изменения макета в зависимости от характеристик устройства. Контент и элементы плавно подстраиваются под доступное пространство, а не переключаются между фиксированными макетами.
Основные отличия:
| Характеристика | Адаптивный веб-дизайн | Отзывчивый веб-дизайн |
|---|---|---|
| Макет | Фиксированные, предопределенные | Плавный, гибкий |
| Подход | Переключение между макетами | Плавное масштабирование и изменение |
| Медиа-запросы | Используются для переключения | Используются для корректировки |
| Гибкость | Меньше | Больше |
| Производительность | Потенциально выше (загрузка одного макета) | Может быть ниже (масштабирование) |
Пример медиа-запроса для отзывчивого дизайна:
cssПример медиа-запроса для адаптивного дизайна (переключение макета):
css