javascript - CSS 确定事件媒体查询

Question

在 Javascript 中是否有直接的方法(不涉及解析 css 代码)来确定哪个媒体查询处于事件状态？

例如我有两个查询:

 @media screen and (max-width:800px)

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

在不解析和查看 clientWidth 的情况下，我如何判断其中哪一个已评估为真。

Answer 1

虽然这是一个老问题，但在谷歌搜索此问题时它的排名很高。

Window.matchMedia是官方的，并得到 all major browsers 的支持(IE10+) 并将允许您查询某个媒体查询当前是否匹配。

来自原始问题:

if (window.matchMedia('screen and (max-width:800px)').matches) {
    // it matches
} else {
    // does not match
}

您还可以通过将事件监听器附加到 MediaQueryList 来监听查询匹配结果何时更改。 window.matchMedia 返回:

var mql = window.matchMedia('screen and (max-width:800px)');
mql.addEventListener(
    function(mq) {
        if (mq.matches) {
            // it matches
        } else {
            // does not match
        }
    }
);