Question

媒体查询和响应式设计全新，我陷入了第一道障碍。

我有以下内容：

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}

@media only screen and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

只有最大宽度：500px才有效，因为当我缩小屏幕时，它会变为第一种颜色，但是当我将其进一步降低到100px以下时，没有其他事情发生。

我哪里失败了？

感谢

SOLUTION：

对于有同样问题的其他人，这是Sean Vieira提供的答案。

级联仍然适用于活动媒体查询，因此交换它们可以解决问题）我也按照Roy Stanfield的建议将其从100px增加，因为桌面浏览器可能不会那么小。

@media only screen and (max-width: 800px) {
    #wrap {
            background: #224466;
    }     
    .entry-title {
        font-size: 2em; 
    }
}

@media only screen and (max-width: 400px) {
    #wrap {
            background: #F00;
    }   
    .entry-title {
        font-size: 1em; 
    }
}

Answer 1

级联仍然适用于活动媒体查询（如果我理解正确的话）。如果你看一下你在没有媒体查询时写下的内容，问题就会变得更加明显：

#wrap { background: #F00; } #wrap { background: #224466; }

切换订单应该解决问题：

@media only screen and (max-width: 500px) { #wrap { background: #224466; } } @media only screen and (max-width: 100px) { #wrap { background: #F00; } }

Answer 2

如果您使用的是普通桌面浏览器，则可能无法使其小于100px。尝试将测试宽度增加到更大的尺寸，如500px和1000px。

Answer 3

这是因为CSS中媒体查询的排序。要么改变顺序，要么改变尝试将!important放在上面使用此http://jsfiddle.net/fidrizers/8Pmuw/

Answer 4

尝试在您的某个查询中使用min-width，因此它变为：

@media only screen and (max-width: 100px) {
    #wrap {
            background: #F00;
    }   
}

@media only screen and (min-width: 101px) and (max-width: 500px) {
    #wrap {
            background: #224466;
    }           
}

只有一个媒体查询工作

4 个答案: