控制通过JavaScript应用哪些CSS媒体查询

Question

有没有一种方法可以控制使用JavaScript的浏览器遵循哪些CSS媒体查询？

例如，如果具有以下css：

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

假设我在宽度大于480像素的桌面浏览器中打开页面，我将看到红色的段落。 我想调用一个javascript函数，以使浏览器服从320px媒体查询。 例如，调用下面的函数将使段落变成蓝色：

setMediaQuery('320px')

这种情况的用例是CMS，它使用户可以保留全角桌面并测试不同的媒体查询，而不必调整其浏览器窗口的大小。

在没有iframe的情况下解决此问题的任何想法？ 我曾考虑过将所有CSS加载到JS中并在那里处理样式，但是选项似乎过于复杂。

Answer 1

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

MDN对此有一些文档，这是一个起点。

下面是寻找媒体的规则匹配一个完整的示例(max-width: 320px) ，并将其更改为(max-width: 2000px) ： Live广告 | 资源

<!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;上面就是其中之一）。 但这可能是一个起点。

Answer 2

我认为用户应该调整浏览器的大小才能查看不同的媒体查询。 尤其是如果您的媒体查询是针对480像素以下的设备的，那么测试它的人应该将其浏览器的大小调整为480像素才能看到它的外观。

这就像是说我想查看一个网站在Android手机上的样子，但在iPhone上进行测试。 尽可能接近实际场景测试确切的测试用例是值得的。

Answer 3

您不能限制来自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中固定）。

控制通过JavaScript应用哪些CSS媒体查询

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-10-25 15:11:30

解决方案2
0 2013-10-25 15:11:22

解决方案3
0 2013-10-25 15:13:34

控制通过JavaScript应用哪些CSS媒体查询

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-10-25 15:11:30

解决方案2 0 2013-10-25 15:11:22

解决方案3 0 2013-10-25 15:13:34

解决方案1
1 已采纳 2013-10-25 15:11:30

解决方案2
0 2013-10-25 15:11:22

解决方案3
0 2013-10-25 15:13:34