Question

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

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

DEMO

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

1 个答案: