window.matchMedia

Интерфейс в глобальной области видимости window.matchMedia, который позволяет получить доступ к медиавыражениям из JavaScript и подписываться на их срабатывание. Медиавыражения активно используются в CSS с помощью директивы @media.

Создадим медиавыражение с параметрами ширины и подпишемся на его изменение. Теперь при изменении ширины экрана, в момент прохода через пороговое значение 420px, будет выведено сообщение:

        
          
          const mobileWidthMediaQuery = window.matchMedia('(max-width: 420px)')function printLog(isMobileSize) {  const size = isMobileSize ? 'уже или равен' : 'шире'  console.log(`Размер экрана ${size} 420px`)}printLog(mobileWidthMediaQuery.matches)mobileWidthMediaQuery.addEventListener('change', function (event) {  printLog(event.matches)})
          const mobileWidthMediaQuery = window.matchMedia('(max-width: 420px)')

function printLog(isMobileSize) {
  const size = isMobileSize ? 'уже или равен' : 'шире'

  console.log(`Размер экрана ${size} 420px`)
}

printLog(mobileWidthMediaQuery.matches)

mobileWidthMediaQuery.addEventListener('change', function (event) {
  printLog(event.matches)
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Создадим медиавыражение и передадим условие, которое будет положительным в случае, когда установлена тёмная тема оформления. Выведем сообщение о текущем состоянии системы, а также подпишемся на её изменение.

При смене темы оформления, в системе будет выводиться сообщение и сообщать текущее состояние.

        
          
          const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')function printLog(isDark) {  const theme = isDark ? 'тёмная' : 'светлая'  console.log(`В системе используется ${theme} тема`)}printLog(themeMediaQuery.matches)themeMediaQuery.addEventListener('change', function (event) {  printLog(event.matches)})
          const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

function printLog(isDark) {
  const theme = isDark ? 'тёмная' : 'светлая'

  console.log(`В системе используется ${theme} тема`)
}

printLog(themeMediaQuery.matches)

themeMediaQuery.addEventListener('change', function (event) {
  printLog(event.matches)
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для создания медиа-объекта нужно вызвать функцию matchMedia() и передать ей медиавыражение. Синтаксис медиавыражений и их варианты полностью совпадают с выражениями, которые используются в CSS.

        
          
          const mediaQueryList = window.matchMedia('(Медиавыражение)')
          const mediaQueryList = window.matchMedia('(Медиавыражение)')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если нужно реагировать на изменения в браузере одновременно с изменениями в вёрстке, вы можете создавать медиавыражения в JavaScript и реагировать на эти события синхронно с CSS.