为何简单的CSS媒体查询无法更改背景颜色？

你的代码核心问题是CSS属性拼写错误——所有媒体查询里的backgroud-color都少写了一个字母n，正确的属性名应该是background-color。浏览器无法识别错误的属性名，所以这些媒体查询的样式完全没有被应用，页面始终显示的是初始定义的红色背景。

另外还有个小细节：第一个媒体查询里的#F00和全局的red是同一个颜色，就算拼写对了，在屏幕宽度≤600px时也看不出颜色变化，建议改成其他区分度高的颜色（比如#FFCCCC），方便测试效果。

修正后的代码如下：

<html>
<head>
<style>
body{
    background-color:red;
}
@media only screen and (max-width: 600px){
    body{
        background-color:#FFCCCC;
    }
}

@media only screen and (max-width: 900px) and (min-width: 600px){
    body{
        background-color:#FF0;
    }
}

@media only screen and (min-width: 900px){
    body{
        background-color:#0F0;
    }
}
</style>
</head>
<body>
</body>
</html>

内容的提问来源于stack exchange，提问作者Pouya Vaghefi