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

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

просмотра, ориентация (портретная или альбомная) и возможность отображения
цветов. Это не то же самое, что типы медианосителей, такие как screen и print,
которые можно было добавлять в таблицы стилей в CSS 2.1. С помощью медиа-
запросов вы указываете не только тип носителя, для которого хотите применить
набор стилей, но также одну или несколько характеристик дисплея пользователя.
Например:

@media screen and (max-width: 600px) {
body {
font-size: 88%;
}
#content-main {
float: none;
width: 100%;
}
}
Приведенный выше медиазапрос начинается
Все доступные характеристики с правила @media, за которым следует указание
медианосителей перечислены на типа медианосителя (в нашем случае это screen).
странице http://www.w3.org/TR/ Затем идет слово and и интересующая нас харак-
css3-mediaqueries/#media1; там теристика медианосителя. Данная характери-
же вы найдете подробное опи- стика медианосителя, max-width: 600px, сооб-
сание каждого из них. Вероятно, щает браузеру, что стили данного медиазапроса,
наиболее часто вы будете исполь- заключенные в фигурные скобки, должны при-
зовать следующие: min-width,
max-width, min-device-width, меняться только в тех случаях, когда ширина
max-device-width, orientation области просмотра не превышает 600 пикселов.
(portrait или landscape), color Если ширина области просмотра больше 600 пик-
и resolution. селов, браузер игнорирует стили данного медиа-
запроса.
Этот медиазапрос можно поместить прямо
Если вы планируете использовать в главную таблицу стилей. Когда все стили на-
тип медианосителя all в своем ходятся в одном документе, отлаживать и под-
медиазапросе, можете укоротить держивать их становится проще; кроме того,
код CSS, вообще не указывая тип браузеру не приходится выполнять ненужные
медианосителя и не добавляя HTTP-запросы. Однако можно также поме-
слово and, например: @media стить медиазапросы в отдельные таблицы стилей
(max-width:600px).
и применять их через элемент link или правило
@import:

@import url(narrow.css) only screen and (max-width:600px);
<link rel="stylesheet" media="only screen and
¬ (max-width:600px)" href="narrow.css">

Здесь перед типом медианосителя я добавила ключевое слово only, для того чтобы
старые браузеры, не поддерживающие медиазапросы, не загружали и не применя-

www.trk.kg