当 css 媒体屏幕查询开始时，是否有浏览器事件要捕获？

Question

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

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

Answer 1

我在 Firefox 的开发页面中发现了一些东西。当媒体查询启动（和退出）时，可以获得事件。这是相当实验性的，但确实有效。

此外，无需使用正则表达式从样式表中过滤掉媒体查询。这可以通过使用 js 访问文档样式表（无需再次加载/ajax 样式表）并检查 CSSrule 对象名称来完成。看起来 css 媒体查询规则有一个其他对象名，然后是正常的 css 样式规则。我建议阅读这篇有趣的文章。一切都在那里解释了。

火狐开发页面：

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/