带有匹配媒体的 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)" );

} );