使用Javascript更改媒体查询

Question

我想手动设置媒体查询。我有一些JavaScript算法告诉我要选择什么，假设它是IsMediaA()。

@media A { display: block; }
@media B { display: inline-block; }

是否可以根据IsMediaA()值更改用过的媒体查询？

Answer 1

这样的事情可以完成这项工作。

if(IsMediaA()) {

   $('<style />', {
        'text': '@media A { display: block; }'
   }).appendTo('body');

}

但是使用某些状态类并在css文件中设置其属性样式会更好：

JS：

if(IsMediaA()) $('element').addClass('is-mediaA');

的CSS：

@media A {
    element.is-mediaA { display: block; }
}