不能在CSS中使用断点 [重复] 。

Question

这个问题在这里已经有了答案:

为什么媒体查询的优先级不如没有媒体查询的css？ (2个答案)

封闭 上月.

我是一个网站开发的新手，我第一次尝试响应式布局。我试图做一些非常简单的事情：根据屏幕宽度显示某种颜色。不管是什么原因，这段代码无法正常工作（我同时使用Chrome和Firefox来模拟移动访问）。这是我的css页面。我是不是遗漏了什么？

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

}

body{
  background-color: green;
}

Answer 1

查看 "级联顺序": 给予具有相同特异性的选择器和设置相同属性的规则集。最后一个选择器覆盖前几个选择器.

---

如果宽度为 更多 小于768px，那么媒体查询中的规则将被忽略，背景颜色将被设置为绿色。

如果小于或等于该值，那么背景将被设置为蓝色，但会被覆盖并改为绿色。

---

改变CSS的顺序。