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

В следующем запросе мы использовали свойство (min-width: 1200px) в качестве основного требования ко всем браузерам и устройствам. Если их ширина превышает 1200 пикселей, они будут применять вложенные стили; если нет – они могут спокойно делать свои дела и ни о чем не думать.

Ну что ж, засучим рукава и приступим к работе над макетом для широких экранов:

@media screen and (min-width: 1200px) {

.welcome,

.blog,

.gallery {

width: 49.375 %;

}

.welcome,

.gallery {

float: right;

margin: 0 0 40px;

}

.blog {

float: left;

margin: 0 0 20px;

}

}

На работающем сайте Robot or Not вы найдете большое количество изменений, которые были внесены в макет, предназначенный для широкого экрана. Но эти три правила – основные. Мы присваиваем трем главным модулям контента (.welcome, blog, и .gallery) практически половину (49,375 %) ширины всей страницы. Затем мы передвигаем модули .welcome и .gallery вправо, а блог – влево. В результате получаем дизайн, который идеально подходит под широкие мониторы (рис. 4.22). Слишком длинные строчки стали короче, а блог, который представляет собой ключевой элемент контента, стал располагаться выше, что сделало его более доступным.

Другими словами, наш отзывчивый дизайн закончен.

^{Рис. 4.22. Давайте еще раз посмотрим на наш дизайн глазами пользователей больших экранов. Он выглядит прекрасно – и все благодаря медиазапросу}

Кое-что по поводу совместимости

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

Хорошая новость заключается в том, что большинство современных десктопных браузеров поддерживают медиазапросы: среди них Opera 9.5+, Firefox 3.5+, браузеры на базе WebKit, такие как Safari 3+ и Chrome. Даже Internet Explorer 9 поддерживает медиазапросы ! Кто-нибудь, ущипните меня.

Да и с мобильными браузерами дела обстоят неплохо. Медиазапросы поддерживают такие браузеры на базе WebKit, как Mobile Safari, webOS производства HP и Android. А по словам Питера-Пола Коха , к ним не так давно присоединились Opera Mobile и Opera Mini. Что касается Windows Phone, с 2011 года на них устанавливается IE9 , браузер, который обеспечивает повсеместную поддержку медиазапросов. Что не может не радовать.

К сожалению, «повсеместную» совсем не означает «универсальную». С десктопными браузерами старше тех, которые перечислены, нам не повезло. И Internet Explorer версии 8 и ниже также не поддерживает медиазапросы, а это значит, что досточтимый IE6 по-прежнему остается проблемой. И несмотря на то, что многие современные устройства с маленькими экранами обеспечивают приличную поддержку запросов, некоторые широко используемые браузеры (IE Mobile и те, которые стоят на старых BlackBerry) их не понимают .

Так что картина не совсем отрадная. Но это вовсе не означает, что отзывчивая верстка – несбыточная мечта. Прежде всего, существует достаточно решений на базе JavaScript, которые компенсируют отсутствие поддержки старых браузеров. Недавно создана библиотека css3-mediaqueries.js library , которая, как предполагается, «позволяет IE5+, Firefox 1+ и Safari 2 интерпретировать, тестировать и применять медиазапросы стандарта CSS3». Это еще очень ранняя, не до конца доработанная версия, и кому-то может показаться, что она недостаточно функциональная, но лично я считаю ее весьма работоспособной.

Недавно я воспользовался маленькой шустрой библиотекой respond.js , разработанной Скоттом Джелом. Там, где css3-mediaqueries.js кажется перегруженной функциями, иногда даже слишком, respond выступает в роли заплатки (патча) при поддержке запросов min-width и max-width в старых браузерах. И он прекрасно работает практически для всех запросов, которые я написал на сегодня. Стоит упомянуть, что для того, чтобы этот скрипт работал как часы, необходимо добавить определенным образом форматированный CSS-комментарий в конце каждого запроса:

@media screen and (max-width: 768px) {

…

}/*/mediaquery*/

@media screen and (max-width: 520px) {

…

}/*/mediaquery*/

@media screen and (min-width: 1200px) {

…

}/*/mediaquery*/