css - 媒体查询被一般声明覆盖

我常见的CSS规则如下：

#dayslist > div {
   height: 51px;
}

和媒体查询CSS规则：

@media (max-width: 979px){
    #dayslist > div {
        height: 44px;
    }
}

但是，当我将浏览器缩小到小于979px的宽度时，媒体查询规则将不适用，并且通用CSS规则将优先于媒体查询中定义的规则。

最佳答案

您将使用后面的语句覆盖媒体查询声明：

@media (max-width: 979px){
    #dayslist > div {
        height: 44px;
    }
}

...

#dayslist > div {
   height: 51px;
}

无论屏幕宽度如何，第二条将高度设置为51px的语句将始终适用。解决方案是在常规声明之后加载媒体查询，以便它们覆盖常规css规则，即：

#dayslist > div {
   height: 51px;
}
@media (max-width: 979px){
    #dayslist > div {
        height: 44px;
    }
}