CSS правило @media

В этой главе:

  • Синтаксис

  • Типы устройств

  • Особенности устройств для медиа запросов

  • Логические операторы

CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.

Синтаксис

1
2
3
@media тип_устройства and|not|only (медиа_особенности) {
    CSS код;
}

Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:

1
2
<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)"
 href="stylesheet.css">

Типы устройств

Тип

Описание

all

Используется для всех типов устройств.

aural

Используется для синтезаторов речи и звука.

braille

Используется для тактильной обратной связи устройств Брайля.

embossed

Используется для принтеров Брайля.

handheld

Используется для небольших или портативных устройств.

print

Используется для принтеров

projection

Используется для презентаций, таких как слайды.

screen

Используется для экранов компьютеров, планшетов, смартфонов и т.д.

speech

Используется для речевых браузеров.

tty

Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы.

tv

Используется для телеэкранов.

К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:

1
2
3
4
5
6
7
8
/* только для печати */
@media print {
  /* скрыть меню */
  #navigation { display: none; }
 
  /* начинать каждую новую страницу с заголовка h1 */
  h1 { page-break-before: always; }
}

Особенности устройств для медиа запросов

Особенность

Описание

aspect-ratio

Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс "min" или "max".

color

Определяет количество бит на цвет для устройства. Может иметь префикс "min" или "max".

color-index

Указывает количество цветов, которое устройство может отображать. Может иметь префикс "min" или "max".

device-aspect-ratio

Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс "min" или "max".

device-height

Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс "min" или "max".

device-width

Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс "min" или "max".

grid

Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0.

height

Указывает высоту области просмотра, например, окно браузера. Может иметь префикс "min" или "max".

monochrome

Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс "min" или "max".

orientation

Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина).

resolution

Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс "min" или "max".

scan

Определяет процесс сканирования телевизионных устройств вывода.

width

Указывает ширину области просмотра, например, окно браузера. Может иметь префикс "min" или "max".

Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.

Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:

1
@media screen and (min-width: 600px) {}

Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:

1
@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

Логические операторы

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

1
@media (min-width: 700px), (orientation: landscape) {}

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

1
@media not screen and (device-width: 800px) {}

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

1

2

/* Не работает в старых браузерах */
@media only screen and (min-width: 600px) {}