10

使用 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>
4

3 回答 3

9

您可以使用MediaQueryList对象：

MediaQueryList 对象维护文档上的媒体查询列表，并在文档上的媒体查询更改时处理向侦听器发送通知。

Nicholas C. Zakas 的相关文章：

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

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

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)
于 2012-09-16T21:36:28.517 回答
4

使用代码检查此处的示例以列出正在应用于当前页面的媒体查询

JavaScript：

var mediaQueryCount = 0;

$(document).ready(function(){
    $links = $('link[rel="stylesheet"]');
    $.each($links, function(i, item){
        if(item.media){
            mediaQueryCount++;
            var start = item.media.indexOf('(')+1;
            var end = item.media.indexOf(')');
            var str = item.media.substring(start, end);
            var listItem = $('<li />',{
                html: str.split(':')[1]
            }).appendTo("#result");
        }
    });
    $('#totalMedia').text(mediaQueryCount);
});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" media="only screen and (min-width: 30em)" />
        <link rel="stylesheet"  media="only screen and (min-width: 40em)"/>
        <link rel="stylesheet"  media="only screen and (min-width: 960px)"/>
    </head>
    <body>
        <p>There are <span id="totalMedia"></span> media queries loaded on this page</p>
        <ol id="result">
        </ol>
    </body>
</html>
于 2012-09-24T12:07:14.737 回答
2

请查看此链接。我使用@sureshunivers 代码来解析和创建 li 列表。

var sheets = document.styleSheets;  //contains an object of all loaded stylesheets
var rules = sheets[i].cssRules; //The rules variable is list of all the rules of the current stylesheet represented as CSSRule objects.

查看这篇文章- 在 javascript 中对媒体查询做出反应

于 2012-09-27T08:42:50.583 回答