Создание запросов в формате CSS с помощью javascript или jQuery

Можно ли создавать правила мультимедийных запросов "на лету" с помощью 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 напрямую или в любой форме.

Ответ 1

Вы можете просто обновить существующий элемент <style> (или создать его) textContent, чтобы включить правило, которое сделает его эффективным в данном контексте.

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

http://jsfiddle.net/vfLS3/

Ответ 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');}}");