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

时间:2012-02-14 13:24:53

标签: html css media-queries

我试图让这块CSS在我的ipad上运行,但它似乎忽略了媒体查询并使用默认的包装器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;
}

2 个答案:

答案 0 :(得分:5)

您的媒体查询样式是否被后来的值覆盖而不是被忽略?您是否尝试过移动之前之前的(我认为您也可以使用!important,但这通常是一个坏主意),或添加另一种明显的样式,如background: red; in MQ一个?

答案 1 :(得分:1)

作为一般规则,您应该始终在样式表中最后编写媒体查询,以便定义主要样式,然后媒体查询到达并在最后覆盖它们。