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

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

Большое значение для нас имеет параметр width=device-width, который делает ширину окна просмотра браузера равной ширине экрана устройства. Например, на iPhone область макета Mobile Safari уже составляет не 980px, а 320 пикселей в портретном режиме и 480 – в ландшафтном.

Имея на руках это значение, мы можем использовать max-width и min-width для поиска диапазонов разрешений ниже или выше определенного порога и загружать в CSS, предназначенного для этих диапазонов. Кроме того, в этом случае браузеры, распознающие запросы, могут воспользоваться ими, что сделает наш дизайн отзывчивым для всех пользователей, неважно, с какого устройства они его просматривают – с телефона, планшета, стационарного компьютера или ноутбука.

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

Медиазапросы в действии

Вы помните тот большой внушительный заголовок (рис. 4.10)? Вот CSS, который его сделал таким:

.main-title {

background: #000;

color: #FFF;

font: normal 3.625em/0.9 "League Gothic", "Arial Narrow", Arial, sans-serif; /* 58px / 16px */

text-transform: uppercase;

}

^{Рис. 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 – вместо тех, которые вызывают у нас только головную боль:

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

.main-title {

font: normal 1.5em Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, Helvetica, sans-serif; /* 24px / 16px */

}

}

Первое правило .main-title применяется всеми браузерами, которые читают наш CSS. Однако для более узких окон браузеров или устройств (разрешение которых не шире 768 пикселей) применяется второе правило, заменяющее первое. Мы сделали два изменения: во-первых, уменьшили кегль элемента .main-title с 3,625em (около 58 пикселей) до 1,5em, или 24px. На мелких экранах такой шрифт смотрится лучше.