<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 - 媒体查询更新CSS规则后，为什么修改CSS规则失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18964687/