Question

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

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

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

您必须为响应式设计添加元标记视口

Answer 2

我无法修改现有的媒体查询值，但我确实找到了解决方法：Generating CSS media queries with javascript or jQuery。解决方法是在＆lt;结束时附加一个全新的媒体查询。样式和GT;标记以覆盖之前应用的所有设置：

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

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

2 个答案: