从Javascript访问CSS3媒体查询

Question

现在，终于在12年后，当全世界都在涌入CSS3媒体查询和响应式设计时，问题仍然存在。

如何从Javascript知道哪些媒体查询

• 以HTML代码呈现：这应该是简单的元素遍历，但有更聪明的方法吗？

• 有效（查询评估为真）

...所以你可以添加特殊的代码路径来支持Javascript代码中的移动设备，平板电脑等？ 最终可以编写函数isMobile()并将其用作特定于小屏幕isMobile()的某些操作的标志。

Answer 1

可以在页面中使用特定对象从CSS中为每个感兴趣的媒体查询获取已知样式。 然后，您可以使用getComputedStyle()从对象中读取该样式，并查看分配给它的内容，这将告诉您哪个媒体查询具有优先权。