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

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

4

2 回答 2

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>

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

于 2013-09-23T17:37:04.953 回答
0

我无法修改现有的媒体查询值，但我确实在这里找到了解决方法：使用 javascript 或 jQuery 生成 CSS 媒体查询。解决方法是在 <STYLE> 标记的末尾附加一个全新的媒体查询，以覆盖之前应用的任何设置：

document.querySelector('style').textContent += 
           "@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";
于 2013-09-23T21:54:18.547 回答