Как реализовать медиа-запрос в js, работающий без обновления страницы

Question

Стоит такая задача: на определенном разрешении экрана мне нужно вставлять блок в html, на другом же его удалять. Вариант с matchMedia не подходит, т.к. он срабатывает после обновления страницы, а мне нужно, чтобы работало так же, как медиа запросы в css.

Нагуглил вариант, когда в css делают медиа-запрос и передают его ширину в блок, например в head, а затем считывают полученную ширину.

Подскажите пожалуйста, есть ли какая-то менее "костыльная" реализация.

П.с. интересует решение на чистом javascript, поскольку решение на jq я находил, и только ради одного мадиа-запроса подключать его в проект не вижу смысла.

Answer 1

По итогу я сделал так, может кому-то будет нужно:

//При загрузке страницы
window.addEventListener('load', () => {
  const screenWidth = getComputedStyle(document.querySelector('head')).width;
   doSmthIfEqual(screenWidth);
})

//При изменении ширины экрана
window.addEventListener('resize', () => {
  const screenWidth = getComputedStyle(document.querySelector('head')).width;
  doSmthIfEqual(screenWidth);
});

function doSmthIfEqual(size) {
   if (size === '1920px') {
    /*Ваш код*/
    console.log('Разрешение экрана меньше 1920px');
  } else console.log('Разрешение экрана больше 1920px');
}

@media screen and (max-width: 1920px) {
  head {
    width: 1920px;
  }
}

<html>
<head>
</head>
<body>
</body>
</html>

БЛОГ НА HUSL

Как реализовать медиа-запрос в js, работающий без обновления страницы

Ответы (1 шт):