控制通过javascript应用哪些css媒体查询

时间:2013-10-25 15:05:47

标签: javascript css media-queries

有没有办法控制哪个css媒体查询浏览器服从javascript?

例如,如果有以下css:

p { color : red; }
@media (max-width: 320px) {
    p { color: blue; }
}
@media (max-width: 480px) {
    p { color: green; }
}      

假设我在宽度为>的桌面浏览器中打开页面480px,我会看到红色段落。我想调用一个javascript函数让浏览器服从320px媒体查询。例如,调用下面的函数可以将段落变为蓝色:

setMediaQuery('320px')

此用例是一个CMS,允许用户保留全宽桌面并测试不同的媒体查询,而无需调整浏览器窗口的大小。

没有iframe解决此问题的任何想法?我已经考虑过将所有css加载到js并在那里操作样式,但选项看起来非常复杂。

3 个答案:

答案 0 :(得分:1)

您可以通过document.styleSheets访问文档中的样式表列表。每个工作表都是CSSStyleSheet对象,其中包含一系列规则。有一种称为CSSMediaRule的规则,其中包含媒体查询的信息,包括该查询的规则及其应用的媒体。理论上,您可以更改它适用的媒体。

MDN有一些文档,here's a starting point

以下是查找与(max-width: 320px)匹配的媒体规则并将其更改为(max-width: 2000px)的完整示例:Live Copy | Source

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Media Query</title>
<style type="text/css">
p { color: green }
@media (max-width: 320px) {
  p { color: red }
}
</style>
<meta charset="UTF-8">
</head>
<body>
<p>This is text turns red after two seconds</p>
<script>
setTimeout(function() {
    var sheets, sheetIndex, ruleIndex, sheet, rules, rule, media;

    sheets = document.styleSheets;
    for (sheetIndex = 0; sheetIndex < sheets.length; ++sheetIndex) {
      sheet = sheets[sheetIndex];
      rules = sheet.cssRules || sheet.rules;
      for (ruleIndex = 0; ruleIndex < rules.length; ++ruleIndex) {
        rule = rules[ruleIndex];
        if (rule.media && rule.media.mediaText === "(max-width: 320px)") {
          console.log("Changing 320px rule to 2000px");
          rule.media.mediaText = "(max-width: 2000px)";
        }
      }
    }
}, 2000);
</script>
</body>
</html>

显然这是非常粗略的代码,我只检查过它适用于Chrome和Firefox。我知道IE中的这些对象与其他对象存在一些差异(参见上面的rules = sheet.cssRules || sheet.rules;,这是其中之一)。但这可能是一个起点。

答案 1 :(得分:0)

我认为用户应该调整浏览器的大小以查看不同的媒体查询。特别是如果您的媒体查询适用于低于480px的设备,那么测试它的人应该将其浏览器的大小调整为480px以查看它的外观。

这就像是说我希望在Android手机上查看网站的外观,但在iPhone上进行测试。尽可能接近真实场景测试确切的测试用例是值得的。

答案 2 :(得分:0)

您不能从JavaScript限制媒体查询,但这不是问题;你用更多的课来解决这个问题:

p { color : red; }
@media (max-width: 320px) {
    p { color: blue; }
    .force_red {
        color: red;
    }
}
@media (max-width: 480px) {
    p { color: green; }
    .force_blue p {
        color: green;
    }
}
.force_blue p {
    color: blue;
}

次要免责声明:请勿为您的班级force_blue命名,这是一个可怕的名字。

脚本:

document.body.className = "force_blue";

理想情况下,JavaScript影响模板的唯一方法是添加或删除类。这允许您为每个潜在状态创建一个模板,并使其保持良好和可维护状态。


JSFiddle演示:http://jsfiddle.net/tafCC/1/

文字将从绿色或红色(取决于您的视口大小)变为蓝色。一旦它变成蓝色,它就会保持蓝色。注意:max-width: 320px规则被max-width: 480px覆盖,也添加了一个最小宽度(在我的JSFiddle中修复)。