Question

此代码是我的位置固定网站菜单的一部分，该菜单控制从顶部开始的边距以防止与内容重叠。这取决于屏幕的宽度。但是，我无法理解为什么@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;
}

Answer 1

这是因为你的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;
  }
}

More help on to understand the order

我希望这会对你有所帮助！

Answer 2

请记住，浏览器会从顶部到按钮读取您的CSS，因此您只需重新订购css和媒体查询

CSS媒体查询被忽略

2 个答案: