Html CSS媒体查询没有响应

我已经读了很多关于RWD的书，真的很想试一试，所以我有一个网站要为一个朋友建立，我认为这将是一个很好的测试人员。我在YouTube上看了一段视频，视频中说，如果你从头开始建立一个网站，并希望它具有响应性，那么就从最小的视口开始构建，然后随着时间的推移进行放大，所以这就是我正在做的

但是，我的第一个CSS媒体查询：

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

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

以下是我的网站代码：

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

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

这就是我开始构建网站的地方，但我删除了它，因为我认为随着每个视口被识别，样式将被过度使用，因此我可以使用最大宽度：479px作为我的基本起点

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

基思：-）

我成功了：

技术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

之间的差异，请参阅。

您需要将要更改的代码放入

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

---

基思：你好，阿里，谢谢你的回复。我对max-width:480px没有问题，因为我删除了这一行，只是将所有这些样式用于我的基本样式。是@media屏幕和（最小宽度：480px）和（最大宽度：767px）似乎对我不起作用：-/那么问题出在哪里？你说“一旦设备/浏览器达到480px的最小宽度，我希望背景变黑（纯粹出于测试目的），它似乎没有响应。”我这样做了：）这个答案肯定解决了我的问题，但Ali的也有助于链接到最大宽度和最大设备宽度的差异。谢谢你们两位，真的帮了我大忙！