使用 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; }
}

Change media query using Javascript