jQuery / JavaScript - 如何检测活动样式表

Question

假设我有多个CSS样式表，它们适用于不同分辨率的媒体查询，如何检测哪些CSS样式表当前处于活动状态并与JavaScript或jQuery一起使用？

谢谢：）

Answer 1

要使当前@media生效，您可以在窗口中使用新的MediaQueryList对象。它具有matchMedia方法，您可以像这样传递媒体查询。

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

您可以注册一个监听器，而不是轮询查询的matchMedia结果。这可以通过调用addListener（）方法来完成：

var mql = window.matchMedia("(min-width: 400px)");
mql.addListener(MediaQueryChange);
MediaQueryChange(mql);

// media query has changed
function MediaQueryChange(mq) {

    if (mq.matches) {
        /* the viewport is at least 400 pixels wide */
    }
    else {
        /* the viewport is less than 400 pixels wide */
    }

}