媒体查询更新CSS规则后，为什么修改CSS规则失败
[英]Why does modify CSS Rule fails when a media query has updated it
问题描述
<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>
我不了解媒体查询的执行顺序吗？ 任何建议，将不胜感激。
2 个解决方案
解决方案1
1 2013-09-23 17:37:04
<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
0 已采纳 2013-09-23 21:54:18
我无法修改现有的媒体查询值，但确实在这里找到了解决方法： 使用javascript或jQuery生成CSS媒体查询 。 解决方法是在<STYLE>标记的末尾附加一个全新的媒体查询，以覆盖以前应用的所有设置：
document.querySelector('style').textContent +=
"@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";
CSS @media 规则在哈巴狗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.