有没有办法控制浏览器使用 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，它允许用户保持全 Angular 桌面并测试不同的媒体查询，而无需调整浏览器窗口的大小。
有没有 iframe 解决这个问题的想法？我考虑过将所有 css 加载到 js 中并在那里操纵样式，但选项似乎过于复杂。
最佳答案
您可以通过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;，这就是其中之一)。但这可能是一个起点。
关于javascript - 控制通过 javascript 应用哪些 css 媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19593406/