小编Dig*_*nce的帖子

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

我有以下内容:

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