1

对媒体查询和响应式设计来说是全新的，我在第一关就掉了下来。

我有以下内容：

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

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

只有 max-width: 500px 起作用，因为当我将屏幕缩小时，它会变为第一种颜色，但当我将其进一步缩小到 100px 以下时，不会发生任何其他事情。

我哪里失败了？

谢谢

解决方案：

对于其他有同样问题的人，这里是 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; 
    }
}
4

4 回答 4

5

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

#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;
    }   
}
于 2012-09-22T21:06:46.423 回答
2

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

于 2012-09-22T21:03:51.747 回答
0

这是因为 CSS 中媒体查询的顺序。要么更改订单，要么尝试放过!important使用这个http://jsfiddle.net/fidrizers/8Pmuw/

于 2012-09-22T21:06:35.800 回答
0

尝试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;
    }           
}
于 2012-09-22T21:16:46.067 回答