Адаптивный дизайн сайтов для мобильных устройств и компьютеров работает за счёт создания отдельных макетов веб-страниц для разных устройств. 2 Разработчик задаёт для каждого макета соответствующие размеры и разрешение экрана. 2

Когда пользователь заходит на сайт, система распознаёт тип его устройства и показывает подходящий вид интерфейса. 2

Некоторые особенности адаптивного дизайна:

• Изменение размера элементов. 2 На маленьких экранах многие элементы уменьшают, но не прямо пропорционально размеру экранов, а незначительно, чтобы было удобно читать и смотреть. 2
• Изменение расположения блоков. 2 На экране ПК пользователь видит много информации: заголовки, тексты, картинки, иконки, кнопки. 2 На смартфоне видно меньше элементов — всё рассчитано на скроллинг. 2 Блоки чаще всего располагают вертикально один за другим. 2 Менее значимые элементы скрывают, например, в контекстное меню — чтобы не загромождать пространство. 2
• Единый дизайн. 1 Для всех макетов используются одни и те же цвета, шрифты, формы. 1 Проект должен быть узнаваемым на любом устройстве. 1

Адаптивный дизайн помогает обеспечить комфорт пользователей при посещении интернет-ресурса в различных условиях. 4