html - CSS 媒体查询没有响应

Question

我已经阅读了很多关于 RWD 的文章，并且真的很想试一试，所以我有一个网站可以为 friend 构建，我认为它会是一个很好的测试器。我在 YouTube 上观看了一段视频，上面说如果您是从头开始构建网站并希望它具有响应性，请从最小的视口(viewport)构建它，然后随着时间的推移将其放大，这就是我正在做的。

然而，我的第一个 CSS 媒体查询:

@media only screen and (min-width: 480px) and (max-width: 767px) { 
body {
background: #000;
}

一旦设备/浏览器达到 480 像素的最小宽度并且我希望背景变黑(纯粹出于测试目的)它似乎没有响应。

这是我网站的代码:http://jsfiddle.net/F6Xbp/

最初我确实有一份媒体声明说:

@media only screen and (max-width: 479px) { 
}

这是我开始构建网站的地方，但我删除了它，因为我认为当每个视口(viewport)被识别时，样式将被覆盖，所以我可以使用 max-width: 479px 作为我的基本起点。

我期待听到一些回复，毫无疑问我忽略了这里如此简单的事情。

基思:-)

Answer 1

Updated jsFiddle

您需要将要更改的代码放在 @media 查询中，并确保它们不会相互重叠(或者至少按顺序放置在无关紧要的位置如果他们是)。正如您所拥有的那样，最底层的媒体查询覆盖了大多数其他媒体查询

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
 body {
    background: #000;
}
/* All Mobile Sizes (devices and browser) */
 @media only screen and (max-width: 767px) {
    body {
        background: red;
    }
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
    body {
        background: green;
    }
}
/* Smaller than standard 960 (devices and browsers) */
 @media only screen and (min-width: 959px) {
    body {
        background: blue;
    }
}