Why does modify CSS Rule fails when a media query has updated it
Question
<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. But when I add a couple media queries to the .cdm-tb style, updating the CSS rules no longer works.
<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.
2 answers
solution1
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>
you have to add meta tag view port for responsive design
solution2
0 ACCPTED 2013-09-23 21:54:18
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 . 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:
document.querySelector('style').textContent +=
"@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.