為什么我的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

通常，您應該始終在樣式表中最后寫入媒體查詢，以便定義主要樣式，然后媒體查詢會出現並在最后覆蓋它們。