生成JavaScript或CSS jQuery的媒体查询(Generating CSS media

是否有可能创建使用JavaScript或jQuery的飞全媒体查询规则？

我已经使用了许多媒体查询目标广义视和具体的设备/使用内联CSS，进口屏幕和链接的文件：

@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" />

我可以添加/使用jQuery删除类：

$("foobar").click(function(){
  $("h1,h2,h3").addClass("blue");
  $("div").addClass("important");
  $('#snafu').removeClass('highlight');
});

我也看document.stylesheets和看似过时的和具体的浏览器：

  document.styleSheets[0].insertRule("p{font-size: 20px;}", 0)

但是，我找不到任何引用以编程方式产生：

  @media screen and (min-width:400px)

从JavaScript直接或以任何形式。

Answer 1:

您只需更新现有<style>元素（或创建一个） textContent包含的规则，这将使其有效在给定上下文。

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

http://jsfiddle.net/vfLS3/

Answer 2:

我用这种方式。 这使得更新文档乘法风格

在HTML：

<style class="background_image_styles">
</style>

在JS

$(".background_image_styles").text("@media (min-width: 1200px) {.user_background_image{background-image: url('https://placehold.it/1200x300');}}");

文章来源: Generating CSS media queries with javascript or jQuery