带有匹配媒体的 jQuery 媒体查询

Question

我正在尝试根据屏幕分辨率更改我的 jQuery 代码。我正在对主要内容区域进行动画处理，并且想在不同的屏幕尺寸上更改其宽度。

经过大量在线搜索后，我发现了一些可能有用的东西，但我无法让它工作。这是需要更改的代码片段。它称为 Match Media，类似于 CSS3 媒体查询，仅适用于 JavaScript。

  var mq = window.matchMedia( "(max-width: 320px)" );
         if (mq.matches) {
           menuLink.click(function(){
            innerContent.css("display", "none");
            contentWrapper.stop().animate(
                    {width: '40em'},
                    {duration:1200,easing: 'easeOutBack'}
            );
            closeButton.stop().delay(800).animate({opacity:'1'},600,'easeInSine');
            $("#fadeBg").fadeIn();
         });
          }

我在这里想要的主要事情是当满足最大宽度标准时，将 contentWrapper 动画化为 40 em。但好像什么也没发生。

提前致谢

Answer 1

您准备好文档了吗？

$( function(){
  ...
  var mq = window.matchMedia( "(max-width: 320px)" );

} );

Answer 2

当我向它添加监听器时，它对我有用。

  var mq = window.matchMedia( "(max-width: 320px)" );
  mq.addListener(function(){
    if (mq.matches) {
      ...
    }
  });

全部包裹在 $(function(){...}); 中因为我在匹配时使用了 jQuery 动画。

Answer 3

这个可以用。

  $(function () {

//1) create a function 
        var handleMatchMedia = function(md) {
            if (md.matches) {
               // your code
            } else {
               // your code
            }
        }
        var mq = window.matchMedia("(max-width: 768px)");

 // 2) call the function
        handleMatchMedia(mq);


//3) call the addListener function  
        mq.addListener(handleMatchMedia);
      });

附注addListener 函数可以在 Typescript 中找到，因此请确保您下载了 Typescript 。

另请阅读这篇文章：

http://blog.astaz3l.com/2013/11/27/matchmedia/

Answer 4

您现在可以将

mediaQuery

对象与

jQuery.prototype.on

事件侦听器一起使用，因为 API 与 DOM 元素相同。

const mediaQuery = window.matchMedia('(min-width: 400px)');
$(mediaQuery).on('change', (e) => {
  console.log('matches', e.originalEvent.matches);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>