从Javascript访问CSS3媒体查询

Accessing CSS3 media queries from Javascript

本文关键字：媒体 查询 CSS3 访问 Javascript      更新时间：2023-09-26

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

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

  • 存在于HTML代码中：这应该是简单的元素遍历，但有更聪明的方法吗？

  • 有效（查询评估为真）

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

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

相关文章：