Отзывчивый веб-дизайн - [16]
Взгляните на следующий отрывок:
>@media screen and (min-width: 1024px) {
>body {
>font-size: 100 %;
>}
>}
Каждый медиазапрос, включая и этот, содержит два компонента:
1. Он начинается с медиатипа (>screen), взятого из списка утвержденных медиатипов спецификации CSS2.1 (http://bkaprt.com/rwd/26/).
2. После типа идет сам запрос в скобках: (>min-width: 1024px), который тоже можно разделить на две составляющие: название свойства (>min-width) и соответствующее значение (>1024px).
Считайте, что медиазапросы просто проверяют ваш браузер. В процессе считывания таблицы стилей браузер получает вопрос от медиазапроса >screen and (min-width: 1024px): относится ли он к медиатипу >screen, и если да, то имеет ли он ширину области просмотра не меньше 1024 пикселей. Если браузер отвечает на оба вопроса положительно, вложенные в запрос стили отображаются, в противном случае браузер попросту игнорирует их и занимается своими делами.
Этот медиазапрос вписан в объявление >@media, что позволило включить его непосредственно в таблицу стилей. Но вы можете также поместить запрос в элемент ссылки (>link), вставив его в атрибут >media:
>
Кроме того, вы можете прикрепить его к инструкции >@import:
>@import url("wide.css") screen and (min-width: 1024px);
Лично я предпочитаю использовать >@media, поскольку он хранит ваш код в отдельном файле, уменьшая количество внешних запросов браузера к серверу.
В принципе, неважно, куда вы впишете запрос, результат будет одинаковым: если браузер соответствует медиатипу и при этом выполняет условие, указанное в запросе, вложенные в запрос CSS выполняются, если нет – игнорируются.
Познакомьтесь с характеристиками
Однако дело не только в том, чтобы проверить ширину и высоту. Запросы могут проанализировать массу характеристик, указанных в спецификации. Но прежде чем мы приступим к этому делу, давайте сначала определимся с терминами, зачастую сложными и непонятными.
1. В спецификации сказано, что каждое устройство имеет «область просмотра» (display area) и «площадь изображения» (rendering surface). Ну и что это такое? Переведем на наш язык: окно просмотра браузера – это область просмотра, а весь монитор – площадь изображения. На вашем ноутбуке областью просмотра будет окно браузера; площадью изображения – экран.
2. Чтобы задать определенные значения, некоторые характеристики могут принимать префиксы min– и max-. Например, вы можете вписать (>min-width: 1024px) и (>max-width: 1024px), чтобы задать область просмотра более или менее 1024 пикселей соответственно.
Все понятно? Великолепно. С этим разобрались, давайте рассмотрим характеристики, которые в соответствии со спе-цификацией мы можем использовать в наших запросах (http://bkaprt.com/rwd/28/) (табл. 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 не понимал запросы на эту характеристику.
Мораль этой истории? Внимательно изучайте устройства и браузеры на предмет запросов характеристик, которые они поддерживают, и проверяйте их надлежащим образом.
В то время как поддержка современных браузеров и устройств все еще находится в процессе развития, медиазапросы дают нам прекрасную возможность четко сформулировать то, как именно должен выглядеть наш дизайн на различных устройствах и браузерах.
Более отзывчивый робот
Медиазапросы – это последний элемент отзывчивого веб-сайта. На протяжении двух глав мы делали гибкий макет, который, однако, является всего лишь основой. Теперь мы можем использовать медиазапросы для коррекции любых визуальных дефектов, возникающих при изменении формы и размеров области просмотра.
Кроме того, мы можем использовать медиазапросы для оптимизации отображения нашего контента в соответствии с требованиями определенного устройства, создавая альтернативные макеты под определенные диапазоны разрешений. Загружая правила стилей, касающиеся этих диапазонов, медиазапросы позволяют нам создавать страницы, более чувствительные к требованиям устройств, которые их отображают.
Другими словами, объединяя гибкие макеты и медиазапросы, мы наконец-то сможем сделать наш сайт отзывчивым.
