为什么当媒体查询更新 CSS 规则时修改 CSS 规则会失败答案

【问题标题】：Why does modify CSS Rule fails when a media query has updated it为什么当媒体查询更新 CSS 规则时修改 CSS 规则会失败
【发布时间】：2013-09-28 16:05:12
【问题描述】：

<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 规则不再起作用。

    <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>

是否有关于我不理解的媒体查询的执行顺序？任何建议，将不胜感激。

【问题讨论】：

你能做一个测试用例吗？ jsfiddle.net
我对 jsfiddle 不够熟悉，无法做到这一点。这是一个测试：pcbuilderplus.com/test/index.html 和 pcbuilderplus.com/test/index2.html 添加了媒体查询。

标签： javascript css media-queries

【解决方案1】：

<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>

您必须为响应式设计添加元标记查看端口

【讨论】：

【解决方案2】：

我无法修改现有的媒体查询值，但我确实在这里找到了解决方法：Generating CSS media queries with javascript or jQuery。解决方法是在

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

【讨论】：