title: What's the most reliable way to integrate javascript with media queries?
body: <p>I am building a responsive web site using Twitter Bootstrap. I can display/hide/modify/rearrange content using media queries and different CSS for each breakpoint.  That works fine.  But what about triggering different javascript for each breakpoint?  What's the most reliable way to do this?</p>
  
  <p>In this particular case I am using the masonry plugin.  I want masonry to layout the items on small, medium or large devices, however on extra small devices I don't want it to.  (My own native list layout will be fine).</p>
  
  <ul>
  <li><p>It seems like the most modern way to do this uses the <code>window.matchMedia()</code> method.  This also lets me add a listener so that I can add/remove masonry if the window size changes.  The downside is that, according to Mozilla Developer Network, support for matchMedia is not great.  I could use a polyfill to get around this, but it sounds a bit complex.</p></li>
  <li><p>Another way to do it would be to test <code>document.documentElement.clientWidth</code> (or <code>.screenWidth</code>), and synchronize my javascript logic with the breakpoints for the media queries.  I would use the <code>window.onresize</code> event to load/unload/re-layout as required.</p></li>
  <li><p>A third way to do it might be to run some javascript on the resize event, testing the value of an attribute which is controlled by css and a media query.  For example, if a particular element is hidden on extra small screens, I could look at the visibility property of that element to determine when I was on an extra small screen.</p></li>
  </ul>
  
  <p>I am leaning towards the second of these three options, but I'm keen to know if there is a 'generally accepted' method of accomplishing this, and also if there are other options which I have missed.</p>