我已经使用了一些库（包括我自己）来动态加载基于我在CSS文件中所列媒体查询资产。 例如：
在CSS：
@media screen and (max-width: 480px) {
.foo {
display: none;
}
}
并采用资产装载机; require.js ， modernizr.js等或使用window.matchMedia和相关联addListener()功能：
if (function("screen and (max-width: 480px)")){
// Load several files
load(['mobile.js','mobile.css']);
}
声明他们两次是尴尬/愚蠢的，只要我能找到，所有的JS助手库和资产装载机要求你重复媒体的质疑，而不是从JS / DOM 编程找到它们。
所以，我一直在探索通过编程方式访问值的能力document.stylesheets ，但我不知道他们是否访问，似乎很少的文档，以表示他们的。
我得最远的是寻找CSSMediaRule和使用console.dir(document.stylesheets)除其他探索样式表对象。
但没有提及由（内document.stylesheets ）在CSS中使用的实际媒体查询规则-只被应用为媒体查询的结果类......我试图找到，程序，方法是：
“屏幕和（最大宽度：480像素）”
是否有通过JavaScript / DOM访问这样的CSS媒体查询规则的方法吗？
为了让规则使用跨浏览器的变体：
var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules; // IE <= 8 use "rules" property
为检测对象CSSMediaRule在规则列表使用（未工作在IE <= 8，因为“CSSMediaRule”类仅在IE> = 9）：
var i = 0;
if (rules[i].type == 4)
{
// Do something
}
用于从当前的DOM获取风格的一些功能（在IE不作品<= 8）：
function getCssRulesFromDocumentStyleSheets(media)
{
var resultCssRules = '';
for (var i = 0; i < document.styleSheets.length; i++)
{
var styleSheet = document.styleSheets[i];
if (isRuleFromMedia(styleSheet, media))
resultCssRules += getCssRulesFromRuleList(styleSheet.cssRules || styleSheet.rules, media);
}
return resultCssRules;
}
function getCssRulesFromRuleList(rules, media)
{
var resultCssRules = '';
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i];
if (rule.type == 1) // CSSStyleRule
{
resultCssRules += rule.cssText + "\r\n";
}
else if (rule.type == 3) // CSSImportRule
{
if (isRuleFromMedia(rule, media))
resultCssRules += getCssRulesFromRuleList(rule.styleSheet.cssRules || rule.styleSheet.rules, media);
}
else if (rule.type == 4) // CSSMediaRule
{
if (isRuleFromMedia(rule, media))
resultCssRules += getCssRulesFromRuleList(rule.cssRules || rule.rules, media);
}
}
return resultCssRules;
}
function isRuleFromMedia(ruleOrStyleSheet, media)
{
while (ruleOrStyleSheet)
{
var mediaList = ruleOrStyleSheet.media;
if (mediaList)
{
if (!isMediaListContainsValue(mediaList, media) && !isMediaListContainsValue(mediaList, 'all') && mediaList.length > 0)
return false;
}
ruleOrStyleSheet = ruleOrStyleSheet.ownerRule || ruleOrStyleSheet.parentRule || ruleOrStyleSheet.parentStyleSheet;
}
return true;
}
function isMediaListContainsValue(mediaList, media)
{
media = String(media).toLowerCase();
for (var i = 0; i < mediaList.length; i++)
{
// Access to mediaList by "[index]" notation now work in IE (tested in versions 7, 8, 9)
if (String(mediaList.item(i)).toLowerCase() == media)
return true;
}
return false;
}
功能的使用例子：
<style type="text/css">
@media screen and (max-width: 480px) {
p { margin: 10px; }
}
@media screen and (max-width: 500px) {
p { margin: 15px; }
}
@media print {
p { margin: 20px; }
}
</style>
<!-- ... -->
<script type="text/javascript">
alert(getCssRulesFromDocumentStyleSheets('print'));
alert(getCssRulesFromDocumentStyleSheets('screen and (max-width: 480px)'));
// For IE (no space after colon), you can add fix to "isMediaListContainsValue" function
alert(getCssRulesFromDocumentStyleSheets('screen and (max-width:480px)'));
</script>
下面是一个JS捣鼓它： https://jsfiddle.net/luisperezphd/hyentcqc/
这就是我要做的事：
在CSS创建类暴露或隐藏在各种断点内容。 这是一个方便的工具呢。 这些已经可以在Twitter的引导，例如。
<style type="text/css">
.visible-sm, .visible-md, .visible-lg{
display:none;
}
@media (max-width: 480px) {
.visible-sm{
display: block;
}
}
@media (min-width: 481px) and (max-width: 960px) {
.visible-md{
display: block;
}
}
@media (min-width: 961px) {
.visible-lg{
display: block;
}
}
</style>
在所有的文件添加这些类空跨度。 他们不会在页面上显示出来，如果你保持跨度内联。
<span id="media_test">
<span class="visible-sm"></span>
<span class="visible-md"></span>
<span class="visible-lg"></span>
</span>
添加这短短的jQuery的扩展脚本文件。 这将在body标签，目前的媒体查询相匹配的新类。
(function ($) {
$.fn.media_size = function () {
//the default port size
var size = 'lg';
//the sizes used in the css
var sizes = ['sm','md','lg'];
//loop over to find which is not hidden
for (var i = sizes.length - 1; i >= 0; i--) {
if($('#media_test .visible-'+sizes[i]).css("display").indexOf('none') == -1){
size = sizes[i];
break;
};
};
//add a new class to the body tag
$('body').removeClass(sizes.join(' ')).addClass(size);
}
}(jQuery));
$(document).media_size();
现在，你有你的CSS媒体自动积分查询Modernizr的风格。
你可以写javascript（jQuery的），这是基于媒体的查询条件：
<a href="#">how big is this viewport?</a>
<script type="text/javascript">
$('.sm a').click(function(e){ alert('Media queries say I\'m a small viewport');});
$('.lg a').click(function(e){ alert('Media queries say I\'m a large viewport');});
</script>
