Основное отличие адаптивной вёрстки от респонсивной — в реакции на изменение размера экрана. 3

Респонсивная вёрстка (отзывчивая) предполагает, что пользователь получает один и тот же HTML и CSS, независимо от устройства, с которого он посещает сайт. 1 Внешний вид страниц определяется прописными стилями и медиа-запросами. 1 Элементы страницы в респонсивном дизайне всегда остаются на странице и могут просто менять своё расположение. 1

Адаптивная вёрстка используется, когда нужно отображать определённый макет для каждого вида устройства. 1 Когда пользователь посещает сайт со своего устройства, система определяет его и его размеры, а затем выдаёт соответствующий HTML и CSS. 1 Количество макетов диктуется дизайном и требованиями проекта. 1

Некоторые преимущества респонсивной вёрстки:

• проще в разработке, так как достаточно сделать единую разметку и прописать корректно стили и медиа-запросы; 1
• легко поддерживать и менять при разработке; 1
• сайты с респонсивным дизайном хорошо ранжируются в поисковой выдаче. 1

Некоторые преимущества адаптивной вёрстки:

• пользователь получает именно тот HTML и CSS, которые будут соответствовать его устройству; 1
• нет лишнего кода в разметке, стили только те, которые нужны для данного девайса; 1
• такой подход оправдан в сложных проектах, заточенных под определённые устройства. 3