Question

在我的网站上，我有汉堡包菜单，显示宽度是否低于480px。每件事都很好，期待一件事。如果宽度低于480px并且我点击汉堡菜单然后我使屏幕的宽度超过480px并且点击关闭菜单汉堡按钮不会消失。这是CSS：

@media screen and (max-width: 480px) {

.links .hamburger {
    display: block;
}

@media screen and (min-width: 480px) {
 .hamburger {
display: none;

}

Answer 1

如果默认为阻止，则只需添加

@media screen and (min-width: 480px) {
  .hamburger {
    display: none;
  }
}

Answer 2

我认为您忘记了媒体查询的右括号：

@media screen and (max-width: 480px) {
  .links .hamburger {
    display: block;
  }
}
@media screen and (min-width: 480px) {
  .links .hamburger {
    display: none;
  }
}

此外，您的最大宽度查询定位更具体的CSS选择器（.links .hamburger），使用相同的选择器会更好。

Answer 3

将其设置为display：none;没有媒体查询

   .hamburger {
       display: none;
   }

    @media screen and (max-width: 480px) {
       .hamburger {
           display: block !important;
       }
    }

您可能需要！在媒体查询的显示块内重要

检查这个小提琴https://jsfiddle.net/ugm77w7s/1/

当宽度超过480px时，HTML / CSS汉堡菜单不会消失

3 个答案: