Отзывчивый веб-дизайн

Маркотт Итан

Познакомьтесь с характеристиками

Однако дело не только в том, чтобы проверить ширину и высоту. Запросы могут проанализировать массу характеристик, указанных в спецификации. Но прежде чем мы приступим к этому делу, давайте сначала определимся с терминами, зачастую сложными и непонятными.

1. В спецификации сказано, что каждое устройство имеет «область просмотра» (display area) и «площадь изображения» (rendering surface). Ну и что это такое? Переведем на наш язык: окно просмотра браузера – это область просмотра, а весь монитор – площадь изображения. На вашем ноутбуке областью просмотра будет окно браузера; площадью изображения – экран.

2. Чтобы

задать определенные значения, некоторые характеристики могут принимать префиксы min– и max-. Например, вы можете вписать (

min-width: 1024px

) и (

max-width: 1024px

), чтобы задать область просмотра более или менее 1024 пикселей соответственно.

Все понятно? Великолепно. С этим разобрались, давайте рассмотрим характеристики, которые в соответствии со спе-цификацией мы можем использовать в наших запросах (табл. 4.1).

А еще мы можем связывать несколько запросов в цепочку, соединяя их словом

and

:

@media screen and (min-device-width: 480px) and (orientation: landscape) { … }

То есть мы можем задать несколько характеристик в одном запросе, выполняя тем самым более сложный анализ устройства, на котором просматривается наш дизайн.

Знай свои характеристики

Чувствуете себя королем мира? Тогда мне именно сейчас следует сказать, что не все браузеры, распознающие

@media

, поддерживают создание запросов для всех характеристик, указанных в спецификации.

_{Табл. 4.1. Характеристики устройств, тестируемых с использованием медиазапросов}

Вот вам пример. Когда Apple выпустила свой первый iPad, он поддерживал медиазапрос

orientation

. Это значит, что вы могли написать запрос

orientation: landscape

или

orientation: portrait

для обслуживания устройства средствами CSS. Круто, да? К сожалению, iPhone не поддерживал запрос orientation до тех пор, пока несколько месяцев спустя не вышло обновление операционной системы. В то время как все устройства позволяли пользователю изменить ориентацию, браузер iPhone не понимал запросы на эту характеристику.

Мораль этой истории? Внимательно изучайте устройства и браузеры на предмет запросов характеристик, которые они поддерживают, и проверяйте их надлежащим образом.

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

Более отзывчивый робот

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

просмотра.

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

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

Приступим.

В компании с viewport

Мы уже определили основные пункты, на которые стоит обратить внимание в нашем дизайне. Но прежде чем применять медиазапросы, мы должны еще раз взглянуть на оригинальный макет.

Когда в 2007 году Apple выпустила iPhone, она создала новое атрибутивное значение для элемента

meta

Mobile Safari: viewport . Зачем? Размеры дисплея iPhone – 320 х 480, но Mobile Safari фактически отображает веб-страницы шириной 980 пикселей. Если вы когда-нибудь заходили на сайт газеты New York Times с телефона с функцией WebKit (рис. 4.9), вы могли видеть это в действии: Mobile Safari рисует страницу на холсте шириной

980px

, а затем сжимает ее, чтобы уместить на экране с разрешением 320 х 480.

^{Рис. 4.9. По умолчанию браузер Mobile Safari воспроизводит контент с шириной 980px, даже когда вы держите телефон в горизонтальной плоскости и ширина ограничена 320px}

При помощи тега

viewport

мы можем контролировать размеры этого холста и задавать точные размеры области просмотра браузера. Например, мы можем установить фиксированную ширину в

320px

:

<meta name="viewport" content="width=320" />

С того момента, как Apple представила механику

viewport

, многие разработчики браузеров приняли ее, сделав стандартом де-факто. Давайте попробуем включить его в наш дизайн, который скоро станет отзывчивым. Однако вместо того, чтобы устанавливать фиксированную ширину в пикселях, используем подход, не зависящий от разрешения. В блоке

head

нашего HTML пишем элемент

meta

:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Свойство

initial-scale

устанавливает уровень масштабирования страницы на

1.0

, или 100 %, что обеспечивает некоторую согласованность распознающих viewport браузеров, для устройств с маленькими экранами. (Более детальную информацию по масштабированию под различные мониторы вы сможете найти в объяснении Mozilla:

Большое значение для нас имеет параметр

width=device-width

, который делает ширину окна просмотра браузера равной ширине экрана устройства. Например, на iPhone область макета Mobile Safari уже составляет не

980px

, а 320 пикселей в портретном режиме и 480 – в ландшафтном.