html.okpython.net
HTML и CSS для начинающих

CSS :: Медиа-запросы

Если возникает необходимость указать типы носителей, а также особые условия, для которых будет применяться данный стиль, нужно использовать правило @media (см. пример №1). Упрощенный синтаксис данного правила имеет вид: 

@media <типы носителей> (<медиа-особенности>){
<стилевые правила>
};

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

  • all – все устройства (применяется по умолчанию);
  • aural – синтезаторы речи и звука;
  • braille – устройства, использующиеся слепыми людьми (основаны на системе Брайля);
  • embossed – принтеры, использующие для печати систему Брайля;
  • handheld – смартфоны, планшеты и другие устройства с малой шириной экрана;
  • print – принтер (так будет выглядеть страница на бумаге);
  • screen – экран монитора;
  • speech – речевые браузеры;
  • projection – проектор;
  • tty – терминалы и другие портативные устройства с ограниченными возможностями экрана.
  • tv – телевизор.

Разрешается через запятую указывать сразу несколько типов устройств.

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


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


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

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


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

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

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

  • aspect-ratio – определяет соотношение ширины и высоты отображаемой области просмотра устройства (не путать с размерами всего экрана). Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слешем / (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения min-aspect-ratio или максимально допустимого max-aspect-ratio. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • color – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на цвет для устройства. Например, если задано число 3, то это означает, что таблица стилей будет применена к устройству, в котором красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось цветным. Также разрешается использовать префикс и задавать условие в виде min-color и max-color. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • color-index – задается в виде положительного целого числа, которое определяет количество цветов, которое поддерживает устройство (например, 256). Разрешается использовать префикс и задавать условие в виде min-color-index и max-color-index. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • device-aspect-ratio – определяет соотношение ширины и высоты всего экрана устройства. Данное соотношение указывается в виде двух целых положительных чисел, которые разделяются между собой слешем / (например, 16/9). Соотношение разрешается также задавать в виде минимально допустимого значения min-device-aspect-ratio или максимально допустимого max-device-aspect-ratio. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • device-height – определяет всю доступную высоту экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде min-device-height и max-device-height. Данная особенность используется для всех устройств кроме speech.
  • device-width – определяет всю доступную ширину экрана устройства или печатной страницы. Разрешается использовать префикс и задавать условие в виде min-device-width и max-device-width. Данная особенность используется для всех устройств кроме speech.
  • grid – определяет, что данное устройство относится к типу с фиксированным размером символов (например, некоторые виды терминалов или телефонов). В таком устройстве символы выстраиваются по заданной сетке и имеют одинаковую ширину и высоту. Отметим, что для подобных устройств следует использовать относительные единицы, а не пикселы. Данная особенность используется для всех устройств и значений не принимает.
  • height – определяет доступную высоту отображаемой области (например, высоту окна браузера). Разрешается использовать префикс и задавать условие в виде min-height и max-height. Данная особенность используется для всех устройств кроме speech.
  • monochrome – задается в виде положительного целого числа (степени двойки), которое определяет количество бит на пиксель для устройства с монохромным выводом. Например, если задано число 8, то это означает, что таблица стилей будет применена к устройству, способному отображать 256 оттенков своего цвета. Если значение не указано вообще, то осуществляется проверка того, чтобы устройство просто являлось монохромным. Разрешается использовать префикс и задавать условие в виде min-monochrome и max-monochrome. Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • orientation – определяет, в каком режиме просмотра находится дисплей: landscape (ландшафтный режим, в котором ширина дисплея больше его высоты) или portrait (портретный режим, в котором высота дисплея больше его ширины). Данная особенность используется для устройств: handheld, print, projection, screen, tty и tv.
  • resolution – определяет разрешение (плотность пикселей) устройства вывода. В качестве значений принимает число точек на дюйм (например, 300dpi) или точек на сантиметр (например, 300dpcm). Данная особенность используется для устройств: handheld, print, projection, screen, и tv.
  • scan – определяет тип развертки телевизора: interlace (череcстрочная) или progressive (прогрессивная). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, а затем чётные. Это позволяет сократить передаваемые данные по сравнению с прогрессивной развёрткой, при которой кадр передаётся и показывается целиком.
  • width – определяет доступную ширину отображаемой области (например, ширину окна браузера). Разрешается использовать префикс и задавать условие в виде min-width и max-width. Данная особенность используется для всех устройств кроме speech.

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

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

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

HTML htmlCodes 
<!-- Эти стили мы использовали на нашем сайте -->

<!-- Для компьютерной версии -->
<link type="text/css" rel="stylesheet" href="body.css?v01">
<link type="text/css" rel="stylesheet" href="pages.css?v01">	

<!-- Для мобильной версии -->
<link type="text/css" media="(max-width: 900px)" href="body_mob.css?v01" rel="stylesheet">	
<link type="text/css" media="(max-width: 900px)" href="pages_mob.css?v01" rel="stylesheet">

Пример №2. Использование медиа-запроса в элементе «link»

Быстрый переход к другим страницам

▲
▼