CSS 确定活动媒体查询

Question

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

例如我有两个疑问：

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

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

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

Answer 1

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

Window.matchMedia 是官方的，受所有主要浏览器 (IE10+) 支持，并且允许您查询某个媒体查询当前是否匹配。

来自原来的问题：

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

您还可以通过将事件监听器附加到 window.matchMedia 返回的

MediaQueryList

来监听查询匹配结果何时发生变化：

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

Answer 2

Paul Irish 的 MatchMedia 可能会成功： https://github.com/paulirish/matchMedia.js

这适合你想做的事情吗？

Answer 3

要了解不同的媒体查询对调整大小或方向更改有何反应，请尝试此页面上的演示：

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以调整媒体查询属性以了解它们如何影响页面。

Answer 4

嗨，我希望这有帮助，实际上我正在向选择器添加一个类，我正在使用这个工具：https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media -javascript中的查询/

事实上，他们在这里有一个清晰的示例，说明在调整大小的窗口中打开的内容 http://robnyman.github.io/matchmedia/

就我而言，我只是在使用该功能达到特定尺寸时执行特定任务。

Answer 5

我不确定你如何知道哪个媒体查询处于活动状态，但是......

...你不能用javascript检查屏幕宽度吗？

if ( window.innerWidth >= 801 ) {
    // @media screen and (min-width:801px)
} else {
    // @media screen and (max-width:800px
}

或者，我在这里缺少什么？