CSS 媒体查询没有响应

Question

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

然而，我的第一个 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) { 
}

这是我开始构建网站的地方，但我删除了它，因为我认为当每个视口都被识别时，样式会被覆盖，所以我可以使用 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;
    }
}

Answer 2

我成功了：http://jsfiddle.net/F6Xbp/1/

技巧1

@media screen and (max-width: 480px) {
    body { background-color:black; }
}

技巧2

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {    
    body { background-color:black; }
}

max-width 和max-device-width 的区别，请参见this。