媒体查询差异屏幕大小在一个CSS样式表中

Question

你好我有这个脚本,我需要当屏幕尺寸为1600像素background-color 是红色,当屏幕尺寸为1366像素background-color是黑色,但我的代码不起作用,媒体查询只能工作1600像素

HTML

<div>

</div>

CSS

div{
    width:100%;
    height:100%;
    background-color:grey;
}

@media screen and (max-width:1366px){
    div{
        background-color:black;
    }
}

@media screen and (max-width:1600px){
    div{
        background-color:red;
    }
}

Answer 1

第二种样式会覆盖第一种样式。改变顺序。它会起作用的。

 div{
width:100%;
height:100%;
background-color:grey;
}

@media screen and (max-width:1600px){
   div
   {
    background-color:red;
   }
}

@media screen and (max-width:1366px){
   div
   {
    background-color:black;
   }
}

演示版