爲什麼修改CSS規則在媒體查詢更新時失敗

<head> 
    <style> 
     .cdm-tb { width: 960px; height: 90px; } 
    </style> 

    <script> 
     ChangeCssRule(".cdm-tb", "width", "468px"); 
     ChangeCssRule(".cdm-tb", "height", "60px"); 
    </script> 
</head> 

<body> 

    <img src='images/testimage.jpg' class='cdm-tb' alt='test' /> 

</body>

ChangeCssRule是一個JS函數，它可以工作。但是，當我向.cdm-tb樣式添加幾個媒體查詢時，更新CSS規則不再有效。爲什麼修改CSS規則在媒體查詢更新時失敗

<style> 
     .cdm-tb { width: 960px; height: 90px; } 
     @media(min-width: 728px) {.cdm-tb { width: 728px; height: 90px; } } 
     @media(min-width: 960px) {.cdm-tb { width: 960px; height: 90px; } } 
    </style>

是否有關於媒體查詢的執行順序我不理解？任何建議，將不勝感激。

來源

2013-09-23 Vincent James

您可以製作測試用例嗎？ http://jsfiddle.net/ – thirtydot

我不熟悉jsfiddle足以做到這一點。這裏是一個測試：http://www.pcbuilderplus.com/test/index.html和http://www.pcbuilderplus.com/test/index2.html添加了媒體查詢。 –

我無法修改現有的媒體查詢值，但我確實在這裏找到了工作：Generating CSS media queries with javascript or jQuery。解決方法是在< STYLE>標籤末尾附加一個全新的媒體查詢，以覆蓋以前應用的所有設置：

document.querySelector('style').textContent += 
      "@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";

來源

2013-09-23 21:54:18

<html> 
<head> 
<meta name="viewport" content="width=device-width"> 

</head> 
<style> 
body{background:#000000;} 
.cdm-tb { width: 960px; height: 90px; } 
@media screen (min-width: 728px) 
{ 
.cdm-tb { width: 728px; height: 90px;} 
} 

@media screen (min-width: 960px) 
{ 
.cdm-tb { width: 960px; height: 90px;} 
} 
</style> 
<img src='images/testimage.jpg' class='cdm-tb' alt='test' /> 

</html>

你必須添加meta標籤視圖端口響應式設計

來源

2013-09-23 17:37:04

爲什麼修改CSS規則在媒體查詢更新時失敗

回答

相關問題