belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

6.2. Медиа-запросы

Если возникает необходимость указать типы носителей, а также особые условия, для которых будет применяться данная таблица стилей, нужно использовать правило @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).

Контрольные вопросы и задания

  1. Опишите синтаксис правила @media и перечислите возможные типы носителей информации, а также разрешенные для использования медиа-особенности.

Словарь новых английских слов

charset [ˈtʃɑːset] – кодировка.
handheld [ˈhændheld] – переносной, портативный.
braille [breɪl] – система чтения Брайля.
screen [skriːn] – экран.
media [ˈmiːdiə] – носители.
projection [prəˈdʒekʃn] – проектор.
face [feɪs] – внешний вид, лицо.
font [fɑːnt] – шрифт.
orphans [ˈɔːfən] – остатки.
widows [ˈwɪdoʊz] – лишние.
inside [ˌɪnˈsaɪd] – внутри, внутрь.
avoid [əˈvɔɪd] – избегать.
always [ˈɔːlweɪz] – всегда.
quotes [kwoʊtz] – кавычки.
close [kloʊz] – закрывать, закрытый.
open [ˈoʊpən] – открывать, открытый.
normal [ˈnɔːrml] – нормальный, обыкновенный.
counter [ˈkaʊntər] – счетчик.
reset [ˌriːˈset] – вновь устанавливать, перезагружать.
content [kənˈtɛnt] – содержимое.
increment [ˈɪŋkrəmənt] – приращение, увеличение.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх