title: jQuery media queries with match media
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>  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();
           });
            }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance</p>