控制哪些css媒體查詢通過javascript應用

有沒有辦法控制瀏覽器使用javascript查詢哪些css媒體查詢？控制哪些css媒體查詢通過javascript應用

例如，如果有以下的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中並操作那裏的樣式，但是選項看起來非常複雜。

來源

2013-10-25 Josh

使用瀏覽器的DOM檢查器來查看哪個CSS應用於您的元素... – JoDev

您可以通過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;，這是其中之一）。但這可能是一個起點。

來源

2013-10-25 15:11:30

我認爲用戶應該調整瀏覽器的大小來查看不同的媒體查詢。特別是如果您的媒體查詢針對的是480像素以下的設備，那麼測試它的人員應該將其瀏覽器大小調整爲480像素，以查看其效果。

這就像說我想看看一個網站在Android手機上的樣子，但在iPhone上測試它。這是值得的，以儘可能真實地測試確切的測試案例。

來源

2013-10-25 15:11:22 Fernker

您不能限制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中修復）。

來源

2013-10-25 15:13:34 Halcyon

控制哪些css媒體查詢通過javascript應用

回答

相關問題