CSS 媒体查询被忽略

标签 css media-queries

这段代码是我位置固定的网站菜单的一部分，它控制顶部的边距以防止与内容重叠。这取决于屏幕的宽度。但是，我不明白为什么 @media screen and (max-width: 329px) {} 条件被 @media screen and (max-width: 604px) 忽略和覆盖) {} 条件。 (仅供引用，它们表示固定菜单换行的断点，相应地需要将内容下推一行。)

现场演示:https://www.ashenglowgaming.com

@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;
  }
}


/* For all larger screen sizes */

#main {
  margin-top: 66px;
}

#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;
  }
}