Css 在桌面上隐藏导航元素，仅在手机上显示

在我的页面上（在visal.de/trb/上在线测试），我目前试图在用户移动时隐藏一个元素并显示另一个元素。被阻止的元素是顶级导航（Glossar&FAQ和Intern），我只想向移动用户展示的元素是“Weiterführendes”

我几乎什么都试过了，比如这个媒体查询：

/* topfix */    @media (max-width: 479px) {
#header nav ul.hide-top, #header .hide-top {
    display: block;
    visibility: hidden;
}}   @media (max-width: 600px) {
/* Header */
#header nav ul.hide-top li {
    display: none;
    visibility: hidden;
}

#header nav ul.hide-top li .phone {
    display: block;
    visibility: hidden;
}

---

但似乎什么都不管用。我猜是因为代码不止一次说它应该在任何时候显示，但最后说它不应该显示。可能这就是发生错误的原因。是否有人知道修复或我做错了什么？

具有“最大宽度”的媒体查询会告诉浏览器在浏览器缩小到该大小时应用样式。最小宽度则相反。它告诉浏览器在浏览器增长到该大小时应用样式

在您列出的第二个媒体查询中，这是收缩浏览器时将激活的第一个媒体查询，您告诉它显示：无，这将隐藏元素并删除其占用的空间。您还设置了

可见性：hidden

，它只会隐藏元素，但不会删除它所占用的空间。在这里使用可见性是多余的

在第一个媒体查询（收缩浏览器时将激活的第二个媒体查询）中，您告诉它要

显示：块

，这将撤消以前的

显示：无

，但您仍然要设置

可见性：隐藏

，而不是将其切换为

可见性：可见

，因此该元素仍然不会显示

下面是一个简单的示例，说明了如何使用“移动优先”方法来显示/隐藏类，而不是像您的示例那样使用“桌面优先”方法

.my-mobile-image {
  display: none; /* This is how it looks on mobile */
}

@media (min-width: 600px) {
  .my-mobile-image {
    display: block; /* This is how it looks on desktop */
  }
}

---

具有“最大宽度”的媒体查询告诉浏览器在浏览器缩小到该大小时应用样式。最小宽度则相反。它告诉浏览器在浏览器增长到该大小时应用样式

在您列出的第二个媒体查询中，这是收缩浏览器时将激活的第一个媒体查询，您告诉它显示：无，这将隐藏元素并删除其占用的空间。您还设置了

可见性：hidden

，它只会隐藏元素，但不会删除它所占用的空间。在这里使用可见性是多余的

在第一个媒体查询（收缩浏览器时将激活的第二个媒体查询）中，您告诉它要

显示：块

，这将撤消以前的

显示：无

，但您仍然要设置

可见性：隐藏

，而不是将其切换为

可见性：可见

，因此该元素仍然不会显示

下面是一个简单的示例，说明了如何使用“移动优先”方法来显示/隐藏类，而不是像您的示例那样使用“桌面优先”方法

.my-mobile-image {
  display: none; /* This is how it looks on mobile */
}

@media (min-width: 600px) {
  .my-mobile-image {
    display: block; /* This is how it looks on desktop */
  }
}

---

您没有以正确的方式使用媒体查询。您应该描述屏幕的最小和最大长度

用于移动屏幕

 @media screen and (min-width:299px) and (max-width:479px) {
   display: block;
   visibility: hidden;
 }

其他屏幕分辨率

 @media screen and (min-width:480px) and (max-width:600px) {
   /* Header */
   #header nav ul.hide-top li {
    display: none;
    visibility: hidden;
   }
   #header nav ul.hide-top li .phone {
    display: block;
    visibility: hidden;
   }
 }

---

我希望它能工作，但目前无法测试它

您没有以正确的方式使用媒体查询。您应该描述屏幕的最小和最大长度

用于移动屏幕

 @media screen and (min-width:299px) and (max-width:479px) {
   display: block;
   visibility: hidden;
 }

其他屏幕分辨率

 @media screen and (min-width:480px) and (max-width:600px) {
   /* Header */
   #header nav ul.hide-top li {
    display: none;
    visibility: hidden;
   }
   #header nav ul.hide-top li .phone {
    display: block;
    visibility: hidden;
   }
 }

---

我希望它能工作，但现在我不能测试它，但如果先将它改为移动设备，而不是桌面设备，则需要更改40多个不同的css类（每次我测试）。没有其他方法可以从桌面优先的方法解决这个问题吗？是的！将

min width

更改为

max width

，并交换周围的

显示

属性。你应该很好。它看起来很有效，但似乎也忽略了我的显示：没有，只使用可见性。这会导致占用空间。A明确：两者都有；清除空间，但同时删除标题框的最大高度。有解决方法吗？好的，将清除后的高度重置为100%很容易解决问题。谢谢你的帮助。但是如果将其改为移动优先而不是桌面优先，则需要更改40多个不同的css类（每次我测试时）。没有其他方法可以从桌面优先的方法解决这个问题吗？是的！将

min width

更改为

max width

，并交换周围的

显示

属性。你应该很好。它看起来很有效，但似乎也忽略了我的显示：没有，只使用可见性。这会导致占用空间。A明确：两者都有；清除空间，但同时删除标题框的最大高度。有解决方法吗？好的，将清除后的高度重置为100%很容易解决问题。谢谢你的帮助。你的方法对我有点帮助。。。它现在正在工作，但我现在的问题是，显示：无；在完全不可见的情况下仍在阻塞某个区域。我使用了两种显示：无；和可见性：隐藏；。有解决办法吗？//a明确：两者都有；删除空间，但使导航包装更大，无论如何//编辑：我现在明白了，css似乎忽略了显示：无；只使用可见性：隐藏；你的方法帮了我一点忙。。。它现在正在工作，但我现在的问题是，显示：无；在完全不可见的情况下仍在阻塞某个区域。我使用了两种显示：无；和可见性：隐藏；。有解决办法吗？//a明确：两者都有；删除空间，但使导航包装更大，无论如何//编辑：我现在明白了，css似乎忽略了显示：无；只使用可见性：隐藏；