无法在 CSS 中使用断点

Question

我是网络开发的新手，我第一次尝试响应式布局。我正在尝试做一些非常简单的事情：根据屏幕宽度显示某种颜色。无论出于何种原因，代码无法正常工作（我正在使用 Chrome 和 Firefox 模拟移动访问）。这是我的 css 页面。我错过了什么吗？

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

}

body{
  background-color: green;
}

Answer 1

参见“Cascading order”：给定具有相同特异性的选择器和设置相同的规则集属性：最后一个覆盖前面的 .

---

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

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

---

更改 CSS 的顺序。