Адаптивный веб-дизайн

HTML-страница может отображаться на устройствах с очень разными экранами. Поэтому нужно управлять видом страницы в зависимости от параметров экрана, точнее – свойств окна браузера как программного объекта.

Определение

Adaptive Web Design – дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах и динамически подстраивающийся под заданные размеры окна браузера.

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

Свойства объекта window

Окно браузера, в котором отображается страница, имеет размеры, измеряемые в пикселях. Размеры могут изменяться во время просмотра страницы: пользователь может уменьшить окно, перевернуть устройство в портретную/альбомную ориентацию, изменить масштаб.

Параметры экрана сейчас:

Свойства в коде JavaScript:

• window.devicePixelRatio: отношение разрешения дисплея текущего устройства в физических пикселях к разрешению в логических (CSS) пикселях. Также это значение можно интерпретировать как отношение размера одного физического пикселя к размеру одного логического (CSS) пикселя. Свойство связано с тем, что различные экраны имеют различные размеры пикселей и плотность пикселей
• window.innerWidth: ширина области содержимого окна браузера, включая, если есть, вертикальный скроллбар
• window.innerHeight: высота области содержимого окна браузера, включая, если есть, горизонтальный скроллбар
• window.screen.width: ширина
• window.screen.height: высота
• window.screen.availWidth: доступная ширина
• window.screen.availHeight: доступная высота
  

Использование медиа-запросов

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

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width. Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Ширина экрана

Наиболее частое использование медиа-запросов – установить стили в зависимости от ширины экрана. В коде CSS написать:

@media (max-width: 600px) {
  /* CSS-стили */;
}

Стили этого запроса будут применяться при ширине области просмотра не более 600 пикселей.

@media (min-width: 600px) and (max-width: 800px) {
  div.right {
    width: 100%;
  }
}

Стиль этого запроса (ширина элемента div с классом right равна 100% от родительского элемента) будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Ссылки

• Адаптивный веб-дизайн
• Использование медиа-запросов
• Media queries