CSS: Правило @media
CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.
Синтаксис
@media тип_устройства and|not|only (медиа_особенности) { CSS код; }
Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:
<link rel="stylesheet" media="тип_устройства and|not|only (медиа_особенности)" href="stylesheet.css">
Типы устройств
Тип | Описание |
---|---|
all | Используется для всех типов устройств. |
aural | Используется для синтезаторов речи и звука. |
braille | Используется для тактильной обратной связи устройств Брайля. |
embossed | Используется для принтеров Брайля. |
handheld | Используется для небольших или портативных устройств. |
Используется для принтеров | |
projection | Используется для презентаций, таких как слайды. |
screen | Используется для экранов компьютеров, планшетов, смартфонов и т.д. |
speech | Используется для речевых браузеров. |
tty | Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы. |
tv | Используется для телеэкранов. |
К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:
/* только для печати */ @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:
@media screen and (min-width: 600px) {}
Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:
@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}
Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.
Логические операторы
В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.
Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:
@media (min-width: 700px), (orientation: landscape) {}
Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:
@media not screen and (device-width: 800px) {}
Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.
/* Не работает в старых браузерах */ @media only screen and (min-width: 600px) {}