title: What are the rules for CSS media query overlap?
body: <p>How do we space out media queries accurately to avoid overlap?</p>
  
  <p>For example, if we consider the code:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media (max-width: 20em) {
      /* for narrow viewport */
  }
  
  @media (min-width: 20em) and (max-width: 45em) {
      /* slightly wider viewport */
  }
  
  @media (min-width: 45em) {
      /* everything else */
  }
  </code></pre>
  
  <p>What will happen, across all supporting browsers, at exactly 20em, and 45em?</p>
  
  <p>I've seen people use: things like 799px and then 800px, but what about a screen width of 799.5 px? (Obviously not on a regular display, but a retina one?)</p>
  
  <p><br></p>
  
  <p>I'm most curious about the answer here considering the spec.</p>