Медиа-запросы используются для таргетинга CSS на определённые типы носителей и функции мультимедиа. Стили могут быть применены, например, к печати или к экранам определённого размера.
Применение медиа-запросов
Медиа-запросы могут быть добавлены к link HTML-элементу:
Медиа-запросы также могут быть встроены в таблицы стилей с помощью @media правила:
@media print {
body {
font-family: "Times New Roman", Times, serif;
}
/* etc. */
}
/* применяет стили только для печати */
@media screen and (max-width: 800px) {
body {
padding: 0;
}
/* etc. */
}
/* применяет стили к экранам шириной до 800 пикселей */
@import также могут быть использованы (@import url(this.css) print, например).
Типы медиа
screen и print являются наиболее распространёнными типами медиа. all также может использоваться и является состоянием медиа-запроса по умолчанию. Другими, с неполной поддержкой, являются braille, embossed handheld, projection speech, tty tv.
Возможности мультимедиа
width min-width max-width
Особенность: width, min-width, max-width.
Описание: ширина области отображения.
Возможные значения: [длина], например. 800px.
height min-height max-height
Особенность: height, min-height, max-height.
Описание: высота области отображения.
Возможные значения: [длина], например, 20em.
device-width min-device-width max-device-width
Особенность: device-width, min-device-width, max-device-width.
Описание: ширина экрана.
Возможные значения: [длина], например, 2in.
device-height min-device-height max-device-height
Особенность: device-height, min-device-height, max-device-height.
Описание: высота экрана.
Возможные значения: [длина], например, 10cm.
orientation
Особенность: orientation.
Описание: портретный (когда высота больше или равна ширине) или альбомный (когда ширина больше высоты).
Возможные значения:
portrait
landscape
aspect-ratio min-aspect-ratio max-aspect-ratio
Особенность: aspect-ratio, min-aspect-ratio, max-aspect-ratio.
Описание: отношение значения width к значению height.
Возможные значения: [соотношение], например, 2/1.
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio
Особенность: device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio.
Описание: отношение значения device-width к значению device-height.
Возможные значения: [соотношение], например, 16/9.
color min-color max-color
Особенность: color, min-color, max-color.
Описание: количество битов в цветовом компоненте экрана.
Возможные значения: [целое число]
0 указывает, что устройство не является цветным.
color без значения эквивалентно min-color: 1 (устройство имеет цвет).
color-index min-color-index max-color-index
Особенность: color-index, min-color-index, max-color-index
Описание: количество записей в таблице поиска цвета устройства.
Возможные значения: [целое число]
0 указывает, что устройство не использует таблицу поиска цветов.
color-index без значения эквивалентно min-color-index: 1 (устройство использует таблицу поиска цветов).
monochrome min-monochrome max-monochrome
Особенность: monochrome, min-monochrome, max-monochrome.
Описание: количество бит на пиксель на устройстве в оттенках серого.
Возможные значения: [целое число]
0 указывает, что устройство не имеет оттенков серого.
monochrome без значения эквивалентно min-monochrome: 1 (устройство в оттенках серого).
resolution min-resolution max-resolution
Особенность: resolution, min-resolution, max-resolution.
Описание: плотность пикселей устройства.
Возможные значения: [разрешение], например, 300dpi.
scan
Особенность: scan.
Описание: используется с tv типом носителя. Процесс сканирования устройства.
Возможные значения:
progressive
interlace
grid
Особенность: grid
Описание: если устройство представляет собой сетку (например, терминал, подобный телетайпу) или растровое изображение.
Возможные значения: [целое число]
0 указывает, что устройство не является сетевым.
grid без значения эквивалентно grid: 1 (устройство — это сетка).
Медиа-функции и их значения должны содержаться внутри круглых скобок, таких как (min-device-aspect-ratio: 16/9) или (color).
Объединение медиа-запросов
Логическое ИЛИ: список, разделённый запятыми
Список, разделённый запятыми, применит стили к нескольким медиа-запросам.
@media screen, projection {
/* CSS applied if device is screen OR projection */
}Логические И: and
Ключевое слово and будет объединять медиа-запросы.
@media print and (min-resolution: 150dpi) {
/* CSS applied if device is print AND resolution is at least 150dpi */
}Логически НЕ: not
Ключевое слово not исключает медиа-запросы.
@media not screen {
/* CSS applied if device is NOT screen */
}Страницы в тему:
- Медиа-запросы (Внушительный урок CSS)
