Чтобы определить, соответствует ли документ строке медиа-запроса в JavaScript, мы используем метод matchMedia().
Несмотря на то, что он официально является частью спецификации модуля представления объектной модели CSS, находящейся в статусе рабочего проекта, его поддержка браузером великолепна начиная с Internet Explorer 10 с глобальным охватом 98,6%.
Использование почти идентично медиа-запросам в CSS. Мы передаем строку медиа-запроса в matchMedia(), а затем проверяем свойство .matches.
const mediaQuery = window.matchMedia(‘(min-width: 768px)’)
Медиа-запрос вернет MediaQueryList. Это объект, который хранит информацию о медиа-запросе, и нам нужно ключевое свойство .matches. Это логическое свойство только для чтения, которое возвращает true, если документ соответствует мультимедийному запросу.
const mediaQuery = window.matchMedia(‘(min-width: 768px)’)
if (mediaQuery.matches) {
alert(‘Media Query Matched!’)
}