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