Internet Explorer媒体查询在不应该生效时生效

Question

我有以下css：

@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}
.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
}

在Internet Explorer 11（也可能是其他版本）中，首次加载页面时，无论视口宽度如何，媒体查询都会生效。只有在页面调整大小时才会意识到媒体查询不应该生效。

Answer 1

尝试在正常的类状态之后放入媒体查询。此外，您也可以尝试为非媒体查询提供高度。

.calendar_head{
    width: 100%;
    font-weight: 700;
    color: #6a7783;
    text-align: center;
    line-height: 30px;
    height: auto;
}
@media all and (max-width: 500px){
    .calendar_head{
        height: 120px;
        line-height: 60px;
    }
}