Question

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

例如，我有两个问题：

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

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

没有解析并查看clientWidth，我怎么知道哪一个已经评估为true。

Answer 1

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

Window.matchMedia是官方版，受all major browsers（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(
    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-queries-in-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
}

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

CSS确定活动媒体查询

5 个答案: