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

Why does modify CSS Rule fails when a media query has updated it

本文关键字：规则 CSS 修改 失败 查询 更新 为什么 媒体      更新时间：2023-09-26
<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>

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

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

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

我无法修改现有的媒体查询值，但我确实在这里找到了一个解决方法：使用 javascript 或 jQuery 生成 CSS 媒体查询。 解决方法是在

相关文章：