只有一个媒体查询工作

Question

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

我有以下内容:

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

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

并且只有最大宽度:500px可以工作,因为当我缩小屏幕时它会变为第一种颜色,但是当我将其进一步降低到100px以下时,没有其他事情发生.

我哪里失败了？

谢谢

解:

对于有同样问题的其他人来说,这是Sean Vieira提供的答案.

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

@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;
    }   
}