Система адаптивного масштабирования в веб-дизайне работает следующим образом: 1

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

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

• Адаптивные изображения. 3 Браузер устройства автоматически проанализирует ширину экрана, затем идентифицирует наиболее релевантные условия и загрузит наиболее подходящее изображение. 1
• Адаптивный размер текста. 3 Размер текста может быть установлен с помощью «vw» единицы, что означает «ширина области просмотра» (viewport width). 3 Таким образом, размер текста будет соответствовать размеру окна браузера. 3
• Использование медиазапросов. 3 С их помощью можно определить разные стили для разных размеров браузера. 3 Например, элементы div будут отображаться горизонтально на больших экранах и располагаться вертикально на маленьких экранах. 3