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

有没有一种方法可以使用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中并在那里操作样式，但这个选项似乎过于复杂。

我认为用户应该调整浏览器的大小，以查看不同的媒体查询。特别是如果你的媒体查询是针对低于480px的设备，那么测试它的人应该将浏览器的大小调整为480px，看看它会是什么样子

---

这就好比说我想看看一个网站在安卓手机上会是什么样子，但在iPhone上测试一下。测试尽可能接近真实场景的精确测试用例是值得的

您可以通过

document.styleSheets

访问文档中的样式表列表。每个工作表都是一个

CSSStyleSheet

对象，它有一个规则列表。有一种称为

CSSMediaRule

的规则，它包含媒体查询的信息，包括该查询的规则及其应用的媒体。理论上，你可以改变它所适用的媒体

MDN对此有一些文档

下面是一个完整的示例，用于查找与

（最大宽度：320px）

匹配的媒体规则，并将其更改为

（最大宽度：2000px）

：

更改媒体查询
p{颜色：绿色}
@介质（最大宽度：320px）{
p{颜色：红色}
}
这是文本，两秒钟后变为红色

setTimeout（函数（）{
var表，表索引，规则索引，表，规则，规则，媒体；
sheets=document.styleSheets；
对于（sheetIndex=0；sheetIndex

---

显然，这是一段非常粗糙的代码，我只检查了它在Chrome和Firefox上是否有效。我知道IE中的这些对象与其他对象有一些不同（参见上面的

rules=sheet.cssRules | | sheet.rules；

，这就是其中之一）。但这可能是一个起点。

您不能限制来自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;
}

次要免责声明：不要给你的班级命名，这是一个可怕的名字

脚本：

document.body.className = "force_blue";

---

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

---

JSFiddle演示：

---

文本将从绿色或红色（取决于视口大小）变为蓝色。一旦它是蓝色的，它就会保持蓝色。注意：

max-width:320px

规则被

max-width:480px

覆盖，也添加一个最小宽度（在我的JSFIDLE中固定）。

使用浏览器的DOM检查器查看哪个CSS应用于元素。。。

document.body.className = "force_blue";