Question

我是html转换的新手。现在我正在使用bootstrap，css和html将设计转换为完整的响应式网站。在我的CSS中，我已经包含了类似的代码 CSS：

$country="India       هىيهش      Asia";

Preg_match_all("/([a-zA-z0-9]+)/", $country, $match);

Var_dump($match);

我面临的问题是第一个查询无效，任何人都可以帮我解决这个问题。

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

这里做错了以下代码会告诉你

＆＃13;

<!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>

＆＃13;

Answer 3

啊，我现在看到了。第二条规则将始终＆＃34;击败＆＃34;首先。在第一个规则中，您为320-414指定黄色，但在第二个规则中，您通过声明要从0-600获得红色来反驳该声明。

颠倒查询的顺序，重要的是你错过了＆＃34;和＆＃34;！

css媒体查询问题

3 个答案: