css媒体查询问题

我是html转换新手。现在我正在使用引导、css和html将设计转换为完全响应的网站。 在我的css中，我包含了如下代码 CSS:

---

我面临的问题是，第一个查询不起作用。有人能帮我解决这个问题吗。

如果我们将第一个查询放在第二个查询之后，第一个查询就起作用了

@media screen and (max-width: 600px) {
    body {
        background-color: red;
        color: white;
    }
}
@media screen and (min-width: 320px) and (max-width: 414px) {
    body {
        background-color: yellow;
        color: white;
    }
}

---

在这里做错误的代码将帮助你

身体{
背景颜色：浅绿色；
}
@仅介质屏幕和（最小宽度：320px）和（最大宽度：414px）{
身体{
背景颜色：黄色；
颜色：白色；
}
}
@媒体屏幕和（最大宽度：600px）和（最小宽度：414px）{
身体{
背景色：红色；
颜色：白色；
}
}
在320px 414px之间调整宽度更改黄色，否则小于600px将更改红色

啊，我现在看到了。第二条规则总是“击败”第一条规则。在第一条规则中，您指定320-414为黄色，但在第二条规则中，您反驳了该陈述，说您希望0-600为红色

---

颠倒查询顺序，重要的是您缺少一个“and”

由于屏幕始终保持红色而无法工作？从600px及以下宽度开始，主体的背景色变为红色。主体的背景色从320px变为414px，即使我编写了更改背景色的查询。请使用“@仅媒体屏幕和（最小宽度：320px）和（最大宽度：414px）”不用“@media screen（最小宽度：320px）和（最大宽度：414px）”谢谢你，先生。现在我理解了我的queryNo问题中的错误，如果它对你有帮助，你可以将答案标记为正确。

@media screen and (max-width: 600px) {
    body {
        background-color: red;
        color: white;
    }
}
@media screen and (min-width: 320px) and (max-width: 414px) {
    body {
        background-color: yellow;
        color: white;
    }
}