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

【问题标题】：Control which css media queries are applied via javascript控制通过 javascript 应用哪些 css 媒体查询
【发布时间】：2013-10-25 23:22:17
【问题描述】：

有没有办法使用 javascript 控制浏览器遵循哪个 css 媒体查询？

例如，如果有以下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 中并在那里操作样式，但选项似乎过于复杂。

【问题讨论】：

使用浏览器的 DOM 检查器查看应用到元素的 CSS...

标签： javascript css media-queries

【解决方案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;，这就是其中之一）。但这可能是一个起点。

【讨论】：

【解决方案2】：

我认为用户应该调整浏览器的大小才能看到不同的媒体查询。特别是如果您的媒体查询是针对低于 480 像素的设备，那么测试它的人应该必须将他们的浏览器大小调整为 480 像素才能看到它的外观。

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

【讨论】：

【解决方案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 中修复）。

【讨论】：