Мораль этой истории? Внимательно изучайте устройства и браузеры на предмет запросов характеристик, которые они поддерживают, и проверяйте их надлежащим образом.
В то время как поддержка современных браузеров и устройств все еще находится в процессе развития, медиазапросы дают нам прекрасную возможность четко сформулировать то, как именно должен выглядеть наш дизайн на различных устройствах и браузерах.
Более отзывчивый робот
Медиазапросы – это последний элемент отзывчивого веб-сайта. На протяжении двух глав мы делали гибкий макет, который, однако, является всего лишь основой. Теперь мы можем использовать медиазапросы для коррекции любых визуальных
дефектов, возникающих при изменении формы и размеров области просмотра.
Кроме того, мы можем использовать медиазапросы для оптимизации отображения нашего контента в соответствии с требованиями определенного устройства, создавая альтернативные макеты под определенные диапазоны разрешений. Загружая правила стилей, касающиеся этих диапазонов, медиазапросы позволяют нам создавать страницы, более чувствительные к требованиям устройств, которые их отображают.
Другими словами, объединяя гибкие макеты и медиазапросы, мы наконец-то сможем сделать наш сайт отзывчивым.
Приступим.
В компании с 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
, многие разработчики браузеров приняли ее, сделав стандартом де-факто. Давайте попробуем включить его в наш дизайн, который скоро станет отзывчивым. Однако вместо того, чтобы устанавливать фиксированную ширину в пикселях, используем подход, не зависящий от разрешения. В блоке
, или 100 %, что обеспечивает некоторую согласованность распознающих viewport браузеров, для устройств с маленькими экранами. (Более детальную информацию по масштабированию под различные мониторы вы сможете найти в объяснении Mozilla:
Большое значение для нас имеет параметр
width=device-width
, который делает ширину окна просмотра браузера равной ширине экрана устройства. Например, на iPhone область
макета Mobile Safari уже составляет не
980px
, а 320 пикселей в портретном режиме и 480 – в ландшафтном.
Имея на руках это значение, мы можем использовать
max-width
и
min-width
для поиска диапазонов разрешений ниже или выше определенного порога и загружать в CSS, предназначенного для этих диапазонов. Кроме того, в этом случае браузеры, распознающие запросы, могут воспользоваться ими, что сделает наш дизайн отзывчивым для всех пользователей, неважно, с какого устройства они его просматривают – с телефона, планшета, стационарного компьютера или ноутбука.
Так, что-то я заболтался. Давайте лучше взглянем на пресловутые запросы в действии.
Медиазапросы в действии
Вы помните тот большой внушительный заголовок (рис. 4.10)? Вот CSS, который его сделал таким:
Рис. 4.10. При должном умении заголовок может стать вполне внушительным
Я упустил несколько презентационных свойств, потому что меня больше заботит то, как этот ужасный огромный заголовок выглядит при небольшом разрешении. Он написан торжественным шрифтом League Gothic белого цвета (
color: #FFF
) на черном фоне (
background: #000
). И если вдруг кто-то все еще не воспринимает его всерьез, учтите, что он написан заглавными буквами (с помощью
text-transform
) размером
3,625 em
, или
58px
.
Что ж, пока все идет хорошо. Но, как мы уже убедились, если уменьшить окно браузера или просматривать страницу на устройстве с меньшим экраном, его дизайн выглядит неправильно, поскольку совсем не масштабируется.
Давайте исправим этот недостаток.
Сначала вставим блок
@media
где-то после первого правила
.main-title
, в котором напишем запрос более узкого диапазона расширения:
@media screen and (max-width: 768px) { … }
В этом запросе мы дали команду браузеру отображать вложенный CSS только в том случае, если ширина окна просмотра не превышает 768 пикселей. Почему
768
? Потому что ширина окна просмотра телефонов, поддерживающих медиазапросы, как и большей части современных планшетов, меньше этого значения. По крайней мере, в определенных режимах. Например, разрешение iPad в портретном режиме составляет
768 px
, а в ландшафтном –
1024 px
.
Но поскольку мы используем
max-width
, а не
max-device-width
, более узкие окна браузеров на вашем компьютере или ноутбуке также примут этот диапазон разрешения. (Помните: характеристики
width
и
height
определяют область просмотра или окно браузера, тогда как параметры