css - 考虑到 div 不会根据我的媒体查询输入进行缩放，我做错了什么？

Question

所以我刚开始，学习不同的教程并通过征服基础知识来挑战自己。我知道这对大多数人来说可能看起来很低调，但要温和一点，我对此有点陌生。

我尝试使用媒体查询 4，例如 @media (30em <= width <= 50em ) { ... } 但它对我不起作用(检查浏览器兼容性)所以我使用了经典代码写作(你可能会在下面看到)。不幸的是，我的 div 无法正确缩放，我显然遗漏了一些东西，比如没有共享正确设置的亲子，但我看不到它。你能指出我的错误吗？如果宽度低于 600、介于 601 和 960 之间以及高于 961 (obv .px)，它需要做的就是缩放 div

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Mobile Styles */
@media only screen and (max-width: 600px) {
  body {
    background-color: #F09A9D;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 601px) and (max-width: 960px) {
  .sign-up,
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 50%;
  }
}
/* Desktop Styles */


@media only screen and (min-width: 961px) {
  .page {
    width: 960px;
    margin: 0 auto;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .header {
    height: 400px;
  }
}

.page {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  background-color: #5995DA;
  height: 80px;
}

.header {
  background-color: #B2D6FF;
}

.content {
  background-color: #EAEDF0;
  height: 600px;
}

.sign-up {
  background-color: #D6E9FE;
}

.feature-1 {
  background-color: #F5CF8E;
}

.feature-2 {
  background-color: #F09A9D;
}

.feature-3 {
  background-color: #C8C6FA;
}

html 只是一堆 div，里面有一个 img src。无论浏览器窗口的大小如何，输出都是相同的。

Answer 1

@sbrrk 是对的。而且，你应该把你的媒体查询写在最底部，这样它们就会覆盖其他具有相同特性的规则