javascript - 将页面的所有媒体查询输出到一个列表中

Question

使用 JavaScript，输出包含应用于当前页面的所有媒体查询的列表的最佳方式是什么。

我假设这需要过滤以找到嵌入式媒体查询，即

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

以及位于 CSS 文件中的媒体查询，即

@media only screen and (min-width: 320px) {}

我正在寻找的示例输出:

<p>There are 3 media queries loaded on this page</p>
<ol>
    <li>30em</li>
    <li>40em</li>
    <li>960px</li>
</ol>

Answer 1

您可以使用 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.

Nicholas C. Zakas 的相关文章:

http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/

---

另一种选择是使用 document 对象的 styleSheets 属性。

var $ol = $('<ol/>');

var styleSheet = document.styleSheets;
$.each(styleSheet, function(i, styleObject) {
   $.each(styleObject.cssRules, function(i, rule){  
      if (rule.media) {
          $ol.append(rule.media[0]) // only screen and (min-width: 481px) and (max-width: 768px)
       }  
   }) 
}) 
var len = $ol.find('li').length;
$('p').text('There are ' + len + ' media queries loaded on this page')
$('body').append($ol)