window.matchMedia

Проверка CSS media queries из JavaScript.

Зачем нужно

Позволяет программно реагировать на изменение размера экрана, темы, ориентации. Аналог CSS @media, но в JS-логике.

Где используется

  • Адаптивная логика (другой компонент для мобилки)
  • Определение тёмной/светлой темы
  • Реакция на изменение ориентации устройства

Code

// Проверка media query
const isMobile = window.matchMedia('(max-width: 768px)');
console.log(isMobile.matches); // true/false

// Слушатель изменений
isMobile.addEventListener('change', (e) => {
  if (e.matches) {
    console.log('Mobile layout');
  } else {
    console.log('Desktop layout');
  }
});

// Определение тёмной темы
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
if (darkMode.matches) {
  document.body.classList.add('dark');
}
darkMode.addEventListener('change', (e) => {
  document.body.classList.toggle('dark', e.matches);
});

// Проверка reduced motion
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');

Связанные темы

Ресурсы