Почему не работает window.matchMedia?

Question

[Дядя Толя]

Не смейтесь. Помогите :D

Comments

[RAX7]

https://developer.mozilla.org/en-US/docs/Web/API/M...

[Дядя Толя]

RAX7, благодарю!

Answer 1

[Алексей Ярков]

const block = document.querySelector('.block');
const mql = window.matchMedia("(max-width: 768px)");

window.addEventListener('resize', () => {
  if (mql.matches) {
    block.style.backgroundColor = "blue"
  } else {
    block.style.backgroundColor = "red"
  }
})

Comments

[Дядя Толя]

Благодарю. Моя невнимательность. Когда смотрел похожие примеры, там был jQ

[Алексей Ярков]

Дядя Толя, суть не в этом )) Вы бы просто ошибку получили, когда условие выполнилось. Суть в том, что строка в matchMedia должна быть в скобках.

[Дядя Толя]

Алексей Ярков, да, это тоже заметил. Спасибо :)

[Сергей delphinpro]

Зачем же ресайз-то слушать?
Сами запросы генерят события. Причем только в моменты пересечения брикпойнтов, что положительно влияет на производиттельность.

const mql = window.matchMedia("(max-width: 768px)");
mql.addListener(function(e){
  if (e.matches) { … }
});