一般声明覆盖的媒体查询

Question

我的常见css 规则如下：

#dayslist > div {
   height: 51px;
}

和媒体查询css 规则：

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

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

Answer 1

您将使用以后的声明覆盖媒体查询声明：

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