title: media queries: composing NOT with OR
body: <p>I'm trying to write a media query that matches one of two ranges and then checks if the statements are false. This is to be able to compose <a href="http://dev.w3.org/csswg/mediaqueries/#custom-mq" rel="nofollow">custom media queries</a> and execute behavior if neither matches. An example query would look like this:</p>
  
  <pre><code>/**
   * Intended behavior would be:
   * !((320px &lt;= width &lt;= 800px) || width &lt;= 320px)
   */
  @media not all and (min-width: 320px) and (max-width: 800px), (max-width: 320px) {}
  </code></pre>
  
  <p>But unfortunately this query doesn't match anything; though using the statements separately does work. I'm curious what the above query translates to (and why), and how I can correctly compose NOT with OR in CSS media queries. Thanks!</p>
  
  <p><strong>edit</strong>: I am specifically looking for a way to combine 2 predefined media queries. Editing the queries themselves is not allowed. For example:</p>
  
  <pre><code>@media (max-width: 320px) {}
  @media (min-width: 320px) and (max-width: 800px) {}
  </code></pre>
  
  <p>The goal is to mix and match <a href="http://dev.w3.org/csswg/mediaqueries/#custom-mq" rel="nofollow">custom media queries</a>. An answer that it's not possible is also an acceptable answer.</p>
  
  <h2>See Also</h2>
  
  <ul>
  <li><a href="http://dev.w3.org/csswg/mediaqueries/#custom-mq" rel="nofollow">W3 custom media query specification</a></li>
  <li><a href="https://css-tricks.com/logic-in-media-queries/" rel="nofollow">css-tricks logic in media queries</a></li>
  </ul>