Question

我一直在阅读很多关于RWD的内容并且真的想试一试，所以我有一个网站为朋友建立，并认为这将是一个很好的测试人员。我在YouTube上观看了一段视频，上面写着如果你是从头开始建立一个网站并希望它具有响应能力，那就从最小的视口构建它，然后随着时间的推移进行扩展，这就是我正在做的事情。

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

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

一旦设备/浏览器达到480px的最小宽度并且我希望背景变黑（纯粹用于测试目的），它似乎没有响应。

以下是我网站的代码：http://jsfiddle.net/F6Xbp/

最初我确实有一个媒体声明说：

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

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

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

基思： - ）

Answer 1

我做到了：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。

Answer 2

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

CSS Media Query无响应

2 个答案: