CSS确定活动媒体查询

在JavaScript中是否有一种直接的方式（不涉及解析CSS代码）来确定哪些媒体查询是活动的？CSS确定活动媒体查询

比如我有两个疑问：

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

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

没有解析和看clientWidth，我怎么能分出哪个其中之一已经评估为true。

来源

2011-03-28 freddylindstrom

检查计算样式。 – BoltClock 2011-03-28 14:09:28

是的，我可以做到这一点，但假设我有一个元素来计算。我试图根据媒体查询填写数据，但我还没有到位的元素，并且在某些元素中加入了一些虚假数据来做出此决定似乎很“黑客”。 – freddylindstrom 2011-03-28 15:57:55

当某个宽度（作为临时度量）被触发时，您可以将某个容器/ DIV的背景/边框设置为鲜红色？ – Dan 2011-04-07 05:15:16

保罗爱尔兰的MatchMedia可以做的伎俩： https://github.com/paulirish/matchMedia.js

但愿适合你正在尝试做什么？

来源

2011-04-14 01:03:27

它会工作，但是我正在寻找一个更优雅的方法:-( – freddylindstrom 2011-04-14 22:47:09

要查看媒体查询关于调整大小或方向如何变化不同的反应，试试这个页面上的演示：

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

您可以调整媒体查询属性得到它们如何影响页面的感觉。

来源

2011-04-20 16:43:17

嗨，我希望这会有所帮助，我实际上添加一个类来选择，我用这个工具的工作：https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

事实上，他们有什么大小的窗口内打开这里一个明显的例子 http://robnyman.github.io/matchmedia/

在我的情况下，我只是做特定的任务，当我在一个特定的大小，你可以使用该函数。

来源

2014-01-10 00:14:05 GabouhSk8

我不知道你怎么知道哪些媒体查询是积极的，但是......

...你就不能检查与JavaScript屏幕宽度？

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

或者，我在这里失踪了什么？

来源

2016-02-09 03:03:19

哦，只是看到_without解析，并看着clientWidth，_，对不起 – 2016-02-09 03:06:05

尽管这是一个古老的问题，但它在搜索这个问题时排名很高。

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 
     } 
    } 
);

来源

2016-03-21 14:47:58 Pete

CSS确定活动媒体查询

回答

相关问题