css 媒体查询问题

Question

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

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

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

我面临的问题是第一个查询不起作用任何人都可以帮助我解决这个问题。

Answer 1

如果我们将第一个查询放在第二个查询之后，第一个查询就可以正常工作。

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