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

Answer 2

这里在代码下面做错了会帮你

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: lightgreen; } @media only screen and (min-width: 320px) and (max-width: 414px) { body { background-color: yellow; color: white; } } @media screen and (max-width: 600px)and (min-width: 414px) { body { background-color: red; color: white; } } </style> </head> <body> <p>resize width between 320px 414px change color yellow else less then 600px it will change red</p> </body> </html> 

Answer 3

啊，我现在看到了。 第二条规则将始终“击败”第一条规则。 在第一个规则中，您将320-414指定为黄色，但是在第二个规则中，您说要从0-600表示红色，则与该语句相矛盾。

颠倒查询的顺序，重要的是您缺少“和”！