Медиа-запросы в CSS
http://belarusweb.net
Основы создания сайтов

Медиа-запросы, css-правило @media

Если возникает необходимость указать типы носителей, а также особые условия, для которых будет применяться данная таблица стилей, нужно использовать правило @media (см. пример 6.3). Синтаксис данного правила имеет вид:
@media тип_носителя_1, тип_носителя_2,... and|not|only (медиа_особенности) {стили для этих типов}.

Типы носителей мы уже перечисляли в ходе изучения HTML, когда рассматривали атрибут media служебного элемента 'link'. Перечислим их еще раз:

/* Данный класс будет применен в ходе печати страницы или 
вывода на экран компьютерного терминала */
@media print, tty{
	.myColor_1{
	color: black;
	}
}


/* Этот класс будет применен, если это экран монитора и
ширина области просмотра устройства не превышает 1300px  */
@media screen (max-width: 1300px){
	.myColor_2{
	color: green;
	}
}


/* Этот класс будет применен ко всем типам устройств, если
ширина области просмотра устройства не меньше 1301px, а соотношение 
ширины и высоты области просмотра не менее 3/4  */
@media (min-width: 1301px) and (min-aspect-ratio: 3/4){
	.myColor_3{
	color: red;
	}
}

		
/* Этот класс будет применен либо для всех устройст, кроме экрана монитора, 
у которых ширина области просмотра не менее 1000px, либо для экрана монитора 
в ландшафтном режиме просмотра */
@media not screen and (min-width: 1000px), screen and (orientation: landscape){
	.myColor_4{
	color: blue;
	}
}


/* Этот класс не будет применен к старым браузерам */
@media only screen and (min-width: 1000px){
	.myColor_5{
	color: yellow;
	}
}

Пример 6.3. Использование правила @media

Помимо указания типа устройств, для которых должен выполняться тот или иной стиль, дополнительно разрешается задавать одно из допустимых медиа-особенностей устройств:

Что касается логических операторов and (и), а также not (не), то они предназначены для составления более сложных условий. Применять их можно как перед типом устройства, так и перед медиа-особенностями. При этом следует помнить, что оператор not имеет наименьший приоритет, а вместо логического оператора or (или) используется обычная запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно из условий выполняется, то стиль будет применён (см. пример 6.3).

Оператор only (только) применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Если же браузер поддерживает медиа-запросы, то оператор only просто игнорируется.

В конце добавим, что медиа-запросы можно использовать и непосредственно в элементе 'link', указав их в качестве значения атрибута media (см. пример 6.3).

Видеоуроки по курсу CSS

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!