title: Control which css media queries are applied via javascript
body: <p>Is a there way to control which css media query a browser obeys using javascript?</p>
  
  <p>For example, if have the following css:</p>
  
  <pre><code>p { color : red; }
  @media (max-width: 320px) {
      p { color: blue; }
  }
  @media (max-width: 480px) {
      p { color: green; }
  }      
  </code></pre>
  
  <p>Assuming I open the page in a desktop browser with width > 480px, I'll see red paragraphs.  I would like to call a javascript function to have the browser obey the 320px media query.  For example, call a function below that would turn paragraphs blue:</p>
  
  <pre><code>setMediaQuery('320px')
  </code></pre>
  
  <p>The use case for this is a CMS that allows users to keep a full-width desktop and test different media queries without having to resize their browser window.</p>
  
  <p>Any ideas for solving this problem without an iframe? I've thought about loading all css into js and manipulating the styles there, but option seems prohibitively complex.</p>