Ale*_*ust 9 javascript jquery media-queries responsive-design
使用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>
你可以使用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)
检查此处的示例，其中包含列出应用于当前页面的媒体查询的代码
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>