API для управления средами в JavaScript

Объект MediaQueryList

MediaQueryList Объект хранит информацию, полученную из медиа-запросов.

MediaQueryList ОбъектОбъект окнасвойства.

MediaQueryList Объект доступен через следующие методы:

window.matchMedia() или просто matchMedia():

Пример

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Попробуйте сами

См. также:

Метод window.matchMedia()

Атрибут MediaQueryList

Атрибут Описание
matches Булево значение. Если документ соответствует запросу, то true, в противном случае false.
media Строковые значения. Медиа-запросы (список).

Метод MediaQueryList

Метод Описание
addListener() Добавление новой функции слушателя, которая выполняется каждый раз, когда изменяется результат оценки медиа-запроса.
removeListener()

Удаление先前 добавленных функций слушателей из списка медиа-запросов.

Если указанный слушатель не находится в списке, не выполняется ни одно действие.

Медиа-запрос

matchMedia() Методы медиа-запросов могут быть Правило @media CSS любые медиа-характеристики, такие как min-height, min-width, orientation и т.д.

Пример

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Попробуйте сами

Тип媒体

Значение Описание
all По умолчанию. Используется для всех типов устройств вывода
print Для принтеров
screen Для компьютерных экранов, планшетов, смартфонов и т.д.
speech Экранный читатель, используемый для «читания» страницы вслух

Медиа-характеристики

Значение Описание
any-hover Есть ли какие-либо доступные механизмы ввода, которые позволяют пользователю наводить мышь на элемент?
(добавлено в Media Queries Level 4).
any-pointer Есть ли какие-либо доступные механизмы ввода, такие как указательное устройство, и если да, то какова его точность?
(добавлено в Media Queries Level 4).
aspect-ratio Соотношение сторон видимой области
color Количество бит на каждый цветовой компонент устройства вывода
color-gamut Приблизительный диапазон цветов, поддерживаемых пользователем агента и устройством вывода
Является ли основным механизмом ввода указательное устройство, которое позволяет пользователю наводить курсор на элемент?
Количество цветов, которые может отображать устройство. color-index
Количество цветов, которые может отображать устройство. grid
Является ли устройство сеточным или растровым? height
Высота видимой области. hover
Является ли основным механизмом ввода указательное устройство, которое позволяет пользователю наводить курсор на элемент?
(добавлено в Media Queries Level 4). inverted-colors
(добавлено в Media Queries Level 4).
Браузер или底层 операционная система инвертируют ли цвета? light-level
Максимальный уровень окружающего света (добавлено в Media Queries Level 4). Максимальное соотношение ширины к высоте области отображения.
max-color Максимальное количество бит на каждую компоненту цвета.
max-color-index Максимальное количество цветов, которые может отображать устройство.
max-height Максимальная высота области отображения, например, окно браузера.
max-monochrome Максимальное количество бит на каждый "цвет" на монохромных устройствах (грayscale).
max-resolution Максимальное разрешение устройства, указанное в dpi или dpcm.
max-width Максимальная ширина области отображения, например, окно браузера.
min-aspect-ratio Минимальное соотношение ширины к высоте области отображения.
min-color Минимальное количество бит на каждую компоненту цвета.
min-color-index Минимальное количество цветов, которые может отображать устройство.
min-height Минимальная высота области отображения, например, окно браузера.
min-monochrome Минимальное количество бит на каждый "цвет" на монохромных устройствах (грayscale).
min-resolution Минимальное разрешение устройства, указанное в dpi или dpcm.
min-width Минимальная ширина области отображения, например, окно браузера.
monochrome Количество бит на каждый "цвет" на монохромных устройствах (грayscale).
orientation Направление видимой области (horizontal или vertical mode).
overflow-block Как устройство вывода обрабатывает содержимое, которое выходит за пределы видимой области по блоковой оси (добавлено в Media Queries Level 4)?
overflow-inline Можете ли вы прокручивать содержимое, которое выходит за пределы видимой области по линейной оси (добавлено в Media Queries Level 4)?
pointer Является ли основным механизмом ввода указательное устройство? Если да, то какова его точность?
(добавлено в Media Queries Level 4).
resolution Разрешение устройства вывода, указанное в dpi или dpcm.
scan Процесс сканирования устройства вывода.
scripting Можно ли использовать скрипты (например, JavaScript)? (добавлено в Media Queries Level 4).
обновить Как быстро можно изменить вид содержимого устройства (добавлено в Media Queries Level 4).
ширина Ширина视орта.