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

【问题标题】：jQuery media queries with match media带有匹配媒体的 jQuery 媒体查询
【发布时间】：2012-07-06 15:15:27
【问题描述】：

我正在尝试根据屏幕分辨率更改我的 jQuery 代码。我正在为主要内容区域设置动画，并希望在不同的屏幕尺寸上更改它的宽度。

在网上大量搜索后，我发现了一些可能有用的东西，但我无法让它工作。这是需要更改的代码 sn-p。它被称为 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 进行动画处理时。但似乎什么都没有发生。

提前致谢

【问题讨论】：

标签： jquery jquery-animate media-queries

【解决方案1】：

你准备好文件了吗？

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

} );

【讨论】：

是的，在另一个调用动画内容之上。

【解决方案2】：

当我为它添加一个监听器时，它对我有用。

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

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

【讨论】：

【解决方案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/

【讨论】：