我正在制作一个供个人使用的 js/jquery 调试工具。我发现微调我的 css 媒体屏幕查询很麻烦。所以我想出了一个想法，在窗口调整大小时显示触发的媒体 css 规则。因此，我需要知道是否有可能在 CSS 媒体屏幕规则启动时捕捉到该事件。
注意：我可以轻松读取我的 css 文件并将它们放入变量中，然后过滤掉所有媒体查询，并将屏幕值与当前窗口大小进行比较。这将起作用，但感觉效率不高，因为需要处理所有 css 文件（和样式标签）。还有其他选择吗？
问问题
1351 次
1 回答
2
我在 Firefox 的开发页面中发现了一些东西。当媒体查询开始（和结束）时，可以获得事件。它非常具有实验性，但确实可以解决问题。
此外，无需使用正则表达式从样式表中过滤掉媒体查询。这可以通过访问 -with js- 文档样式表（无需再次加载/ajax 表单）并检查 CSSrule 对象名称来完成。似乎 css 媒体查询规则有一个其他的对象名，然后是普通的 css 样式规则。我推荐阅读这篇有趣的文章。这一切都在那里解释。
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/
另一个有趣的项目！
于 2013-10-14T11:54:55.727 回答