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

【问题标题】：What am I doing wrong considering the divs will not scale according to my media query input?考虑到 div 不会根据我的媒体查询输入进行缩放，我做错了什么？
【发布时间】：2019-10-15 22:00:35
【问题描述】：

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

我尝试使用媒体查询 4，例如 @media (30em

*{
  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。无论浏览器窗口大小如何，输出都是一样的。

【问题讨论】：

确保您已添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 此视口元标记。并在文件下方添加所有媒体。
添加了元标记，但没有将媒体查询放在 css 文件的末尾是我做错了。谢谢你和 laferry 指出这一点。

标签： css responsive-design media-queries

【解决方案1】：

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

【讨论】：

谢谢，就像我上面说的，问题是我把它们放在文档的开头而不是放在最后。菜鸟的错误，但我就是这样学习的。谢谢。