被一般声明覆盖的媒体查询答案

【问题标题】：media queries overridden by general declarations被一般声明覆盖的媒体查询
【发布时间】：2014-12-07 02:16:38
【问题描述】：

我的common css规则如下：

#dayslist > div {
   height: 51px;
}

和媒体查询css规则：

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

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

【问题讨论】：

【解决方案1】：

您正在用稍后的语句覆盖您的媒体查询声明：

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

...

#dayslist > div {
   height: 51px;
}

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

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

【讨论】：