在一个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;
    }
}

- Val Do

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;
   }
}

DEMO

- Suresh Ponnukalai