2

我正在尝试根据屏幕分辨率更改我的 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 时。但似乎什么都没有发生。

提前致谢

4

3 回答 3

3

你准备好文件了吗？

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

} );
于 2012-07-06T15:22:06.303 回答
1

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

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

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

于 2013-05-08T17:16:04.717 回答
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);
      });

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

还阅读了这篇文章：

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

于 2014-11-14T02:57:47.543 回答