匹配媒体的jQuery媒体查询 [英] jQuery media queries with match media

问题描述

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

I am trying to change my jQuery code depending on screen resolutions. I am animating main content area, and would like to change it's width on different screen sizes.

经过大量的在线搜索之后，我发现了一些可能有用的方法，但是我无法使其正常工作.这里是需要更改的代码段.它称为Match Media，类似于CSS3媒体查询，仅适用于JavaScript.

After a lot of searching online i found something that might be helpful, but i can't get it to work.Here is the code snippet that needs to be changed. It is called Match Media, something like CSS3 media queries, only for 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时.但似乎什么也没发生.

The main thing that i want here is when the max-width criteria is fulfilled to animate the contentWrapper for 40 em. But it seems that nothing is happening.

预先感谢

推荐答案

您是否已准备好在文档中这样做?

Are you doing this on document ready?

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

} );

这篇关于匹配媒体的jQuery媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！