Почему после запуска js кода не срабатывает медиа-запроc?

Question

[ref21 @ref]

Есть код после запуска которого не срабатывает медиа-запрос.

document.querySelector('.search').onclick = function() {
  var clientWidth = document.body.clientWidth;
  var mnu = document.querySelector('.mnu');
  var sandwichMnu = document.querySelector('.sandwich-mnu');
  var searchBtn = document.querySelector('.search-button');

  if(searchBtn.classList.contains('search-button-active')) {

    searchBtn.classList.remove('search-button-active');
    if(clientWidth > 1620) {
      mnu.style.display = 'flex';
      sandwichMnu.style.display = 'none';
    }

  } else {

    if(clientWidth <= 1850) {
      mnu.style.display = 'none';
      sandwichMnu.style.display = 'flex';
    }

    searchBtn.classList.add('search-button-active');

  }
}

А вот сам медиа-запрос:

@media only screen and (max-width: 1620px) 
             .head-navigation .mnu
                    display: none

             .sandwich-mnu
                    display: flex

Не могу понять причину. Может дело в приоритетах?

Answer 1

[Вадим Кот]

Чтобы избежать проблем со специфичностью (а у инлайновых стилей специфичность больше), лучше добавляйте и убирайте элементам классы с помощью classList https://developer.mozilla.org/ru/docs/Web/API/Elem...
А для классов в стилях прописывайте нужные css правила. Возьмите это за правило и избавитесь от таких проблем в будущем.

Answer 2

[Александр]

Javascript и медиазапросы в CSS никак не связаны. Они работают независимо друг от друга. Почему думаете что причина в JS?

Comments

[ref21 @ref]

Проблема появляется только после запуска этого конкретного куска кода