[英]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 is a JS function that works. ChangeCssRule是有效的JS函数。 But when I add a couple media queries to the .cdm-tb style, updating the CSS rules no longer works. 但是,当我向.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>
Is there an order of execution concerning media queries I am not understanding? 我不了解媒体查询的执行顺序吗? Any suggestions would be appreciated. 任何建议,将不胜感激。
<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>
you have to add meta tag view port for responsive design 您必须添加元标记视图端口以进行响应式设计
I wasn't able to modify the existing media query values but I did find a work around here: Generating CSS media queries with javascript or jQuery . 我无法修改现有的媒体查询值,但确实在这里找到了解决方法: 使用javascript或jQuery生成CSS媒体查询 。 The work around was to just append a brand new media query on the end of the < STYLE> tag to override any previous settings that were applied: 解决方法是在<STYLE>标记的末尾附加一个全新的媒体查询,以覆盖以前应用的所有设置:
document.querySelector('style').textContent +=
"@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.