title: Generating CSS media queries with javascript or jQuery
body: <p>Is it possible to create full media query rules on the fly using Javascript or jQuery?<br></p>
  
  <p>I've used numerous media queries to target generalised viewports and specific devices/screens using inline CSS, imports and linked files:</p>
  
  <pre><code>@media screen and (min-width:400px) { ... }
  @import url(foo.css) (min-width:400px);
  &lt;link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" /&gt;
  </code></pre>
  
  <p>I can add/remove classes using jQuery:</p>
  
  <pre><code>$("foobar").click(function(){
    $("h1,h2,h3").addClass("blue");
    $("div").addClass("important");
    $('#snafu').removeClass('highlight');
  });
  </code></pre>
  
  <p>I've also look at <code>document.stylesheets</code> and the seemingly archaic and browser-specific:</p>
  
  <pre><code>  document.styleSheets[0].insertRule("p{font-size: 20px;}", 0)
  </code></pre>
  
  <p>But I can't find any reference to programatically generating:</p>
  
  <pre><code>  @media screen and (min-width:400px)
  </code></pre>
  
  <p>from javascript directly or in any form.</p>