当css媒体屏幕查询启动时是否有抓住的浏览器事件？

Question

我正在制作一个供个人使用的js / jquery调试工具。我发现微调我的css媒体屏幕查询很麻烦。所以我提出了一个想法，在窗口调整大小时显示触发的媒体css规则。因此，当css媒体屏幕规则开始时，我需要知道是否可以捕获事件。

注意：我可以轻松读取我的css文件并将它们放入变量并过滤掉所有媒体查询，并将屏幕值与当前窗口大小进行比较。这将起作用但感觉效率不高，因为需要处理所有css文件（和样式标记）。还有其他选择吗？

Answer 1

我在firefox的dev页面中找到了一些东西。当媒体查询开始（并开始）时， 可能会获得事件。它很有实验性，但它确实有效。

此外，无需使用正则表达式从样式表中筛选出媒体查询。这可以通过访问-with js-文档样式表（不需要再次加载/ ajax表单）并检查CSSrule对象名称来完成。似乎css媒体查询规则有一个其他对象名，然后是普通的css样式规则。我建议阅读this有趣的文章。这一切都在那里解释。

Firefox开发页面

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

  

MediaQueryList对象维护一个媒体查询列表   文档，并处理时向侦听器发送通知   关于文件的媒体查询改变。

     

这使得观察文档以检测其媒体的时间成为可能   查询会更改，而不是定期轮询值，如果您   需要以编程方式检测媒体查询值的更改   在文件上。

官方规格：

http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface

另一篇（编辑：非常）有趣的文章可以在这里找到：

http://tylergaw.com/articles/reacting-to-media-queries-in-javascript

我想做的工作示例可以在这里找到!!

http://tylergaw.github.io/media-query-events/

另一个有趣的项目！

http://harvesthq.github.io/harvey/