CSS媒体查询被忽略

此代码是我的位置固定网站菜单的一部分，它从顶部控制边距，以防止与内容重叠。这取决于屏幕的宽度。但是，我不明白为什么

@媒体屏幕和（最大宽度：329px）{}

条件被

@媒体屏幕和（最大宽度：604px）{}

条件忽略和覆盖。（仅供参考，它们代表断点，固定菜单在断点处断开到新行，要求内容相应地向下推一行。）

现场演示：

---

这是因为您的css顺序。将普通css放置在媒体查询上方，如下所示。它会很好用的

#main {
  margin-top: 66px;
}

#menu-w-home-menu {
  line-height: 1.2em;
}

@media screen and (max-width: 604px) {
  #menu-w-home-menu {
    line-height: 1.2em;
  }
  #main {
    margin-top: 89px !important;
  }
}

@media screen and (max-width: 329px) {
  #main {
    margin-top: 113px !important;
  }
  #menu-w-home-menu {
    line-height: 1.2em;
  }
}

---

我希望这对你有帮助

这是因为你的css顺序。将普通css放置在媒体查询上方，如下所示。它会很好用的

#main {
  margin-top: 66px;
}

#menu-w-home-menu {
  line-height: 1.2em;
}

@media screen and (max-width: 604px) {
  #menu-w-home-menu {
    line-height: 1.2em;
  }
  #main {
    margin-top: 89px !important;
  }
}

@media screen and (max-width: 329px) {
  #main {
    margin-top: 113px !important;
  }
  #menu-w-home-menu {
    line-height: 1.2em;
  }
}

---

我希望这对你有帮助

记住，浏览器从顶部到按钮读取css，因此您只需重新排列css和媒体查询

记住，浏览器从顶部到按钮读取css，因此您只需重新排列css和媒体查询

任何最大宽度为329px的屏幕也与最大宽度为604px的屏幕匹配。也可以匹配10英里的最大宽度。您还需要了解，媒体查询不会改变它们包含的规则的特定性。您能解释一下您关于特定性的观点吗？谢谢。媒体查询中的选择器后面的任何具有相同特定性选择器的规则都将覆盖这些选择器。任何最大宽度为329px的屏幕也将匹配最大宽度为604px的屏幕。也可以匹配10英里的最大宽度。您还需要了解，媒体查询不会改变它们包含的规则的特定性。您能解释一下您关于特定性的观点吗？谢谢。任何在媒体查询中的选择器之后出现的具有相同特定性选择器的规则都将覆盖这些选择器。