为什么我的CSS媒体查询被忽略？

Question

我试图在ipad上使用这段CSS，但似乎忽略了媒体查询，而是使用默认的包装CSS。 有什么办法可以阻止这种情况的发生？

@media only screen and (max-width: 1024px) and (max-height: 768px) {
    #wrapper {
        position:absolute; 
        z-index:1;
        top:41px;
        width:150px;
        height:300px;
    }    
}

#wrapper {
    position:absolute; 
    z-index:1;
    top:41px; 
    bottom:0px; 
    left:0;
    width:100%;
    height:800px;
    overflow:auto;
}

Answer 1

您的媒体查询样式不是被以后的值覆盖而不是被忽略吗？ 您是否尝试过将通用样式移到MQ样式之前 （我想您也可以使用！important，但这通常是个坏主意），或者添加了另一个明显的样式，例如background: red; 在MQ中吗？

Answer 2

通常，您应该始终在样式表中最后写入媒体查询，以便定义主要样式，然后媒体查询会出现并在最后覆盖它们。