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

【问题标题】：Why is my CSS media query being ignored?为什么我的 CSS 媒体查询被忽略？
【发布时间】：2013-05-26 21:36:09
【问题描述】：

我试图让这段 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;
}

【问题讨论】：

标签： html css media-queries

【解决方案1】：

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

【讨论】：

啊啊啊，谢谢你的朋友——过去 24 小时我的大脑一直在煎熬！ :P

【解决方案2】：

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

【讨论】：