Кто может подсказать почему этот код не срабатывает? Точнее медиа запрос через `js` не срабатывает, функция отрабатывает при любой ширине монитора checkMedia(); $(window).on('resize', function() { checkMedia(); }); function checkMedia() { var headerCart = $('.header__cart'); if (window.matchMedia('(max-width: 992px)').matches) { headerCart.mouseenter(function(){ $('.header__cart > .title').fadeOut(0); $('.header__cart > .img').fadeOut(0); $('.header__cart > .sum').fadeOut(0); $('.header__cart > .content').fadeIn(200); $('.header__cart > .button').fadeIn(0); }); headerCart.mouseleave(function(){ $('.header__cart > .content').fadeOut(0); $('.header__cart > .button').fadeOut(0); $('.header__cart > .title').fadeIn(200); $('.header__cart > .img').fadeIn(200); $('.header__cart > .sum').fadeIn(200); }); } }
  • Try if($(window).width() < 992) { - stckvrw

1 answer 1

The media query works, most likely you are doing something wrong with the headerCart (mouseenter и mouseleave) . In the example and on the screen you can see that everything works.

 $(window).on('load', function() { checkMedia(); }); $(window).on('resize', function() { checkMedia(); }); function checkMedia() { console.log('work') var headerCart = $('.header__cart'); if (window.matchMedia('(max-width: 992px)').matches) { console.log('work max-width: 992px') headerCart.mouseenter(function() { $('.header__cart > .title').fadeOut(0); $('.header__cart > .img').fadeOut(0); $('.header__cart > .sum').fadeOut(0); $('.header__cart > .content').fadeIn(200); $('.header__cart > .button').fadeIn(0); }); headerCart.mouseleave(function() { $('.header__cart > .content').fadeOut(0); $('.header__cart > .button').fadeOut(0); $('.header__cart > .title').fadeIn(200); $('.header__cart > .img').fadeIn(200); $('.header__cart > .sum').fadeIn(200); }); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

enter image description here