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

Процесс адаптации сайта к особенностям устройства пользователя: 4

1. Пользователь открывает страницу сайта. 4
2. Сервер посылает в браузер пользователя HTML-документ. 4 Код одинаковый для любых устройств, с которых сайт открывают пользователи. 4
3. Размер страницы, расположение контента и всех элементов веб-страницы настраивается уже в браузере каждого пользователя индивидуально. 4

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

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