jQuery媒体查询与匹配媒体

时间:2012-07-06 15:15:27

标签: jquery jquery-animate media-queries

我正在尝试根据屏幕分辨率更改我的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动画。但似乎没有任何事情发生。

提前致谢

3 个答案:

答案 0 :(得分:2)

你准备好文件了吗?

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

} );

答案 1 :(得分:0)

当我添加一个监听器时,它与我合作。

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

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

答案 2 :(得分:0)

这个会起作用。

  $(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/