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

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

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

解决方法

我在firefox的dev页面中找到了一些东西.当媒体查询开始(并且踢出)时,可以获得事件.它很有实验性,但它确实有效.

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

Firefox开发页面：

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

A MediaQueryList object maintains a list of media queries on a
document,and handles sending notifications to listeners when the
media queries on the document change.

This makes it possible to observe a document to detect when its media
queries change,instead of polling the values periodically,if you
need to programmatically detect changes to the values of media queries
on a document.

官方规格：

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/