А также создание блока @media в таблице стилей и его привязку к определенному медиатипу:
@media screen {
body {
font-size: 100 %;
}
}
@media print {
body {
font-size: 15 pt;
}
}
В любом случае спецификация предлагает браузеру определить, к какому медиатипу он относится. («Я десктопный браузер! Я отношусь к медиатипу screen», «Я пахну чернилами и тонером: я тип print», «Я браузер видеоконсоли: я тип tv» и т. д.) Загрузив страницу, браузер будет отображать только тот CSS, который относится к определенному медиатипу, и игнорировать все остальные. И – в теории – это потрясающая идея.
Но теория – это, наверное, последнее, что нужно занятому по горло веб-дизайнеру.
Когда на сцене появились все эти браузеры для устройств с маленькими экранами, как, например, телефоны или планшеты, с ними пришли и проблемы. В соответствии со спецификацией решить эти проблемы несложно, нужно просто создать таблицу стилей для медиатипа handheld:
Проблемы скорее кроются в нас самих, по крайней мере, частично. На первых мобильных устройствах не было эффективно работающих браузеров, поэтому мы просто игнорировали их, разрабатывая вместо этого таблицы стилей для медиатипов screen или print. А когда такие браузеры появились, в Сети не было достаточно CSS-файлов типа handheld. В результате многие разработчики мобильных браузеров решили использовать таблицы стилей для медиатипа screen.
А растущий диапазон мобильных устройств еще больше усложняет дело. Сможет ли одна и та же таблица стилей решить все проблемы для iPhone и для телефона пятилетней давности?
К счастью, организация W3C включила в спецификацию CSS3 синтаксис медиазапросов, усовершенствовав методологию медиатипов. Медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы (http://bkaprt.com/rwd/27/).
Взгляните на следующий отрывок:
@media screen and (min-width: 1024px) {
body {
font-size: 100 %;
}
}
Каждый медиазапрос, включая и этот, содержит два компонента:
1. Он начинается с медиатипа (screen), взятого из списка утвержденных медиатипов спецификации CSS2.1 (http://bkaprt.com/rwd/26/).
2. После типа идет сам запрос в скобках: (min-width: 1024px), который тоже можно разделить на две составляющие: название свойства (min-width) и соответствующее значение (1024px).
Считайте, что медиазапросы просто проверяют ваш браузер. В процессе считывания таблицы стилей браузер получает вопрос от медиазапроса screen and (min-width: 1024px): относится ли он к медиатипу screen, и если да, то имеет ли он ширину области просмотра не меньше 1024 пикселей. Если браузер отвечает на оба вопроса положительно, вложенные в запрос стили отображаются, в противном случае браузер попросту игнорирует их и занимается своими делами.
Этот медиазапрос вписан в объявление @media, что позволило включить его непосредственно в таблицу стилей. Но вы можете также поместить запрос в элемент ссылки (link), вставив его в атрибут media:
Кроме того, вы можете прикрепить его к инструкции @import:
@import url("wide.css") screen and (min-width: 1024px);
Лично я предпочитаю использовать @media, поскольку он хранит ваш код в отдельном файле, уменьшая количество внешних запросов браузера к серверу.
В принципе, неважно, куда вы впишете запрос, результат будет одинаковым: если браузер соответствует медиатипу и при этом выполняет условие, указанное в запросе, вложенные в запрос CSS выполняются, если нет – игнорируются.
Однако дело не только в том, чтобы проверить ширину и высоту. Запросы могут проанализировать массу характеристик, указанных в спецификации. Но прежде чем мы приступим к этому делу, давайте сначала определимся с терминами, зачастую сложными и непонятными.
1. В спецификации сказано, что каждое устройство имеет «область просмотра» (display area) и «площадь изображения» (rendering surface). Ну и что это такое? Переведем на наш язык: окно просмотра браузера – это область просмотра, а весь монитор – площадь изображения. На вашем ноутбуке областью просмотра будет окно браузера; площадью изображения – экран.
2. Чтобы задать определенные значения, некоторые характеристики могут принимать префиксы min– и max-. Например, вы можете вписать (min-width: 1024px) и (max-width: 1024px), чтобы задать область просмотра более или менее 1024 пикселей соответственно.
