html - 为什么 css3 媒体查询不起作用？

Question

我正在尝试在 css3 中使用媒体查询来使我的网站响应，看起来我做得很好但它不起作用，这是我的代码:

@media screen and (max-width: 480px) {
body{
  background-color: blue;
}
}
}
body {
  background-color: #fcfcfc;
}

和标题:

    <link rel="stylesheet" type="text/css" href="style.css">

css 文件有效，但所有媒体查询都无效...

Answer 1

参见 the cascading order .

Sort according to importance (normal or important)

两条规则都正常

and origin

都是作者规则

Sort rules with the same importance and origin by specificity of selector

body 和 body 是相同的选择器，因此具有相同的特异性。

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.

background-color: #fcfcfc; 规则出现在 background-color: blue; 之后，因此它会覆盖它。

顺序很重要。颠倒规则的顺序。

(您还有一个额外的 } 会导致语法错误。将其删除。)

body {
  background-color: #fcfcfc;
}

@media screen and (max-width: 480px) {
  body {
    background-color: blue;
  }
}