I have below script, it's doing fine in firefox and chrome. ie9 doesn't show the change of colors.
<style type="text/css">
body {
background-color: #FF77BB;
}
@media screen and (max-width: 960px) {
body {
background-color: #8A2BE2;
}
}
@media screen and (max-width: 768px) {
body {
background-color: #FF8C00;
}
}
@media screen and (max-width: 550px) {
body {
background-color: #7FFF00;
}
}
@media screen and (max-width: 320px) {
body {
background-color: #CC0011;
}
}
}
</style>
Works fine for me, just get rid of the extra } at the very end, the other browsers may not make it an issue but IE9 is very picky, if one thing is off it breaks the whole thing.