0

我已经阅读了很多关于 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 作为我的基本起点。

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

基思:-)

4

2 回答 2

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请参阅此。

于 2013-08-17T13:36:50.587 回答
1

更新了 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;
    }
}
于 2013-08-17T13:44:31.567 回答