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();
         });
          }

我想要的主要内容是满足最大宽度标准，以便为40 em设置contentWrapper动画。但似乎没有任何事情发生。

提前致谢

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);
      });

P.S。 addListener函数可以在Typescript中找到，所以请确保你下载了Typescript。

还阅读了这篇文章：

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

jQuery媒体查询与匹配媒体

3 个答案: