для поиска диапазонов разрешений ниже или выше определенного порога и загружать в 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
определяют область просмотра или окно браузера, тогда как параметры
device-width
и
device-height
– размеры всего экрана).
Написав этот запрос, можем приступать к обработке
тех элементов дизайна, которые не масштабируются. Сначала давайте еще раз обратимся к нашему огромному заголовку. Чтобы сделать его более удобоваримым, впишем в медиазапрос правило
.main-title
с другими свойствами CSS – вместо тех, которые вызывают у нас только головную боль:
применяется всеми браузерами, которые читают наш CSS. Однако для более узких окон браузеров или устройств (разрешение которых не шире 768 пикселей) применяется второе правило, заменяющее первое. Мы сделали два изменения: во-первых, уменьшили кегль элемента
.main-title
с
3,625em
(около
58
пикселей) до
1,5em
, или
24px
. На мелких экранах такой шрифт смотрится лучше.
Во-вторых, шрифт, который мы прежде использовали для этого заголовка – наш любимый League Gothic, совсем не смотрится на таких экранах (рис. 4.11). Поэтому я решил заменить его семейством шрифтов (
). Теперь заголовок стал более читабельным (рис. 4.12).
Рис. 4.11. Шрифт League Gothic, несмотря на всю свою прелесть, кажется слишком мелким и узким
Рис. 4.12. Не так красиво, как League Gothic? С ним вообще сложно что-то сравнить. Однако этот новый шрифт читается куда лучше, да и вполне соответствует дизайну
Вы, наверное, заметили, что мы не переписывали другие свойства в первом правиле
.main-title
. То есть черный фон, белый цвет шрифта и заглавные буквы все еще применяются к нашему уменьшенному заголовку. Запрос переписал только те характеристики, которые нас не устраивали.
Вуаля! При помощи медиазапроса мы исправили заголовок, и теперь на маленьких экранах он смотрится прекрасно (рис. 4.13).
Но это только начало. Мы можем не только подправить шрифтовое оформление, но и решить более сложные проблемы, связанные с дизайном.
Рис. 4.13. Сравните изначальный вариант заголовка (вверху) с вариантом, получившимся вследствие применения запроса