Медиазапросы – это последний элемент отзывчивого веб-сайта. На протяжении двух глав мы делали гибкий макет, который, однако, является всего лишь основой. Теперь мы можем использовать медиазапросы для коррекции любых визуальных дефектов, возникающих при изменении формы и размеров области просмотра.
Кроме того, мы можем использовать медиазапросы для оптимизации отображения нашего контента в соответствии с требованиями определенного устройства, создавая альтернативные макеты под определенные диапазоны разрешений. Загружая правила стилей, касающиеся этих диапазонов, медиазапросы позволяют нам создавать страницы, более чувствительные к требованиям устройств, которые их отображают.
Другими словами, объединяя гибкие макеты и медиазапросы, мы наконец-то сможем сделать наш сайт отзывчивым.
Приступим.
В компании с 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:
С того момента, как Apple представила механику viewport, многие разработчики браузеров приняли ее, сделав стандартом де-факто. Давайте попробуем включить его в наш дизайн, который скоро станет отзывчивым. Однако вместо того, чтобы устанавливать фиксированную ширину в пикселях, используем подход, не зависящий от разрешения. В блоке head нашего HTML пишем элемент meta:
Свойство initial-scale устанавливает уровень масштабирования страницы на 1.0, или 100 %, что обеспечивает некоторую согласованность распознающих viewport браузеров, для устройств с маленькими экранами. (Более детальную информацию по масштабированию под различные мониторы вы сможете найти в объяснении Mozilla: .)
Большое значение для нас имеет параметр width=device-width, который делает ширину окна просмотра браузера равной ширине экрана устройства. Например, на iPhone область макета Mobile Safari уже составляет не 980px, а 320 пикселей в портретном режиме и 480 – в ландшафтном.
Имея на руках это значение, мы можем использовать max-width и min-width для поиска диапазонов разрешений ниже или выше определенного порога и загружать в CSS, предназначенного для этих диапазонов. Кроме того, в этом случае браузеры, распознающие запросы, могут воспользоваться ими, что сделает наш дизайн отзывчивым для всех пользователей, неважно, с какого устройства они его просматривают – с телефона, планшета, стационарного компьютера или ноутбука.
Так, что-то я заболтался. Давайте лучше взглянем на пресловутые запросы в действии.