title: Switching to Em-Based Media Queries
body: <p>Now that the WebKit <a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/" rel="noreferrer">page-zoom bug</a> has been <a href="https://bugs.webkit.org/show_bug.cgi?id=53186" rel="noreferrer">fixed</a>, what are the main reasons for using em-based media queries rather than pixel-based media queries?</p>
  
  <p><strong>Bounty</strong></p>
  
  <p>I'm adding a bounty to my question because so many prominent <a href="http://foundation.zurb.com/" rel="noreferrer">CSS</a> <a href="http://susy.oddbird.net/" rel="noreferrer">frameworks</a> <a href="http://filamentgroup.com/" rel="noreferrer">and</a> <a href="http://bradfrostweb.com/" rel="noreferrer">web</a> <a href="http://css-tricks.com/zooming-squishes/" rel="noreferrer">developers</a> use em-based media queries that I'm convinced there must be good reason(s) for doing so.</p>
  
  <p>The one advantage I'm aware of is that if a user changes the default font size in their browser, content will <a href="http://css-tricks.com/zooming-squishes/" rel="noreferrer">squeeze</a> in a manner similar to the issue solved by the <a href="https://bugs.webkit.org/show_bug.cgi?id=53186" rel="noreferrer">page-zoom fix</a>. Is there any data to show people actually do change the default size rather than zoom?</p>
  
  <p><strong>Note</strong></p>
  
  <p>To make my question more focused, I removed two peripheral items. The <a href="https://stackoverflow.com/posts/22228568/revisions">original post</a> will add perspective to @nwalton's great <a href="https://stackoverflow.com/a/22262489/723007">answer</a>, which addressed all three points I asked about.</p>