在媒体查询中不显示对菜单图标不起作用答案

【问题标题】：display none in media query not working for menu icon在媒体查询中不显示对菜单图标不起作用
【发布时间】：2021-11-09 19:37:57
【问题描述】：

我正在使用 HTML/CSS 和 javascript 创建登录页面。对于媒体查询，max-width: 768px 工作正常，但是当我对min-width: 768px 使用媒体查询时，display: block 不会删除大于 768 像素的屏幕尺寸的菜单栏。

@media screen and(min-width: 768px){

  body{
    margin: 0;
  }

  .nav{
    height: calc( var(--header-height) + 3rem);
  }

  .nav-toggle .nav-close{
    display: none;
  }

}

这里.nav-toggle 是汉堡图标类，.nav-close 是十字（X）按钮的类。我使用了display 属性，但它仍然显示切换。

【问题讨论】：

请将与 .nav-toggle 和 .nav-close 相关的所有 CSS 连同您的 HTML 一起发布。这将使我们更容易为您提供帮助。谢谢。
请看How to Ask。

标签： javascript html css responsive-design media-queries

【解决方案1】：

关键在于定位正确的课程

尝试通过您的浏览器开发工具检查您的目标大小，您可能会注意到您的 css 已被覆盖，在这种情况下您可以尝试更具体的类来增加 css 特异性或通过 !important 标签强制您的 css

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。