Что такое адаптивная версия сайта?

Создание адаптивной версии сайта заключается в том, что веб-сайт в динамическом режиме подстраивается под размеры конкретного устройства. Если размер экрана вдруг расширится / сузится, например, при изменении размера браузера или изменении ориентации планшета, то и сайт на это сразу отреагирует, без перезагрузок и дополнительных задержек.

Адаптивный дизайн строится на трех главных принципах:

  • Резиновый макет
  • Резиновые изображения
  • Медиазапросы

Мы получаем единственную версию веб-ресурса, которая идеально отображается на различных устройствах и дисплеях, учитывая их специфику. У всех посетителей Вашего сайта появилась возможность комфортного чтения страниц с любого устройства: начиная с автомагнитолы и заканчивая большим телевизором на стене.

Для разработки гибкого макета необходимо применять исключительно относительные единицы измерения: em для размера шрифтов и процентов для размеров элементов. В редком использовании px тоже нет ничего плохого, но лучше свести их применение к минимуму.

Необходимо отметить, что один из современных подходов к адаптивному дизайну сосредотачивается в том, чтобы вначале создавать макет под небольшие дисплеи (концепция «Вначале мобильные»), а только потом, по мере роста габаритов дисплея подгружать элементы на веб-страницу (прогрессивное улучшение) при помощи JavaScript. Смысл в том, чтобы не заставлять пользователей с телефонов грузить лишнюю информацию, которые они всё равно не увидят, значительно замедляя загрузку веб-страниц.

В медиазапросах все индивидуально, Вы добавляете туда те изменения, которые необходимы для определенного сайта при размере браузера. Для наглядности вы можете изменять размер  дектопного браузера и отслеживать постепенное изменение размера. Именно так и работают медиазапросы.

Статьи по теме: