title: Common breakpoints for media queries on a responsive site
body: <p>So I am working on my first responsive website which makes extensive use of media queries. I was wondering if there are some common page-widths I should optimize for.  </p>
  
  <p>I will probably have a maximum width (not going full fluid) I am thinking I'll have maybe 3-5 set widths with fun little CSS3 transitions between them (similar to how <a href="http://css-tricks.com" rel="noreferrer">CSS Tricks</a> works).</p>
  
  <p>Currently the numbers I am using are somewhat arbitrary:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media all and (max-width: 599px){...}
  @media all and (min-width: 600px) and (max-width:799px){...}
  @media all and (min-width: 800px) and (max-width:1024px){...}
  @media all and (min-width: 700px) and (max-width: 1024px){...}
  @media all and (min-width: 1025px) and (max-width: 1399px){...}
  @media all and (min-width: 1400px){...}
  </code></pre>
  
  <p>Also, I think I have read that some mobile devices don't behave as expected (with <code>@media</code>).  Where does this come into play and how should I deal with these situations?</p>