Page 218 - Сила CSS3 Освой новейший стандарт

218 • Глава 6. Разные размеры экрана, разный дизайн

характеристик пользовательского дисплея, например ширины области просмотра. Такие
характеристики, называемые характеристиками медианосителя, перечислены на страни-
це http://www.w3.org/TR/css3-mediaqueries/#media1; не все браузеры, поддерживающие
медиазапросы, поддерживают все доступные характеристики.
Для добавления медиазапроса в таблицу стилей запишите правило @media, а затем тип
медианосителя и одну или несколько характеристик медианосителя. Медиазапросы можно
также записывать с элементами link и правилами @import, не используя правило @media.
Один медиазапрос может содержать несколько характеристик медианосителя, например:
@media screen and (min-width:320px) and (max-width:480px). Кроме того, в одно правило
@media можно добавить несколько медиазапросов, разделив их запятыми, например:
@media screen and (color), projection and (color) — как сгруппированный селектор.
Если добавить в начале медиазапроса слово not, то соответствующие стили будут при-
меняться только в тех случаях, когда медиазапрос не является истинным, например:
@media not print and (max-width:600px).
Помимо изменения макета для различных размеров экрана, медиазапросы можно при-
менять для решения следующих задач:
• корректировка размера текста и интерлиньяжа, для того чтобы текст было удобно
читать с любой длиной строки (см. http://forabeautifulweb.com/blog/about/proportional_
leading_with_css3_media_queries);
• увеличение размера символов кнопок, вкладок и ссылок на мобильных устройствах,
для того чтобы эти элементы проще было активировать пальцами на сенсорном экране;
• уменьшение размера основного текста на небольших экранах мобильных устройств;
поскольку вся страница фактически сжата, текст в таком случае кажется более крупным,
чем на экранах настольных компьютеров;

• отображение внутренних ссылок, ведущих к содержимому внизу страницы (для не-
больших экранов мобильных устройств);
• подкачка изображений с высоким разрешением на устройствах с дисплеями высокого
разрешения, таких как iPhone 4 (см. http://dryan.com/articles/hi-res-mobile-css-iphone-4,
а также пример в конце главы);
• подкачка изображений разных размеров для более крупных или маленьких областей
просмотра;
• применение разных стилей печати при печати на бумаге разного размера.

Таблица 6.1. Поддержка медиазапросов в браузерах

IE Firefox Opera Safari Chrome

Частично, начиная Частично, начиная Частично Частично Частично
с версии 9 с версии 3.5

www.trk.kg