在桌面上隐藏导航元素，仅在移动设备上显示

Question

在我的页面上（在 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;
}

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

Answer 1

带有 max-width 的媒体查询告诉浏览器在浏览器缩小到该尺寸时应用样式。最小宽度正好相反。它告诉浏览器在浏览器增长到该大小时应用样式。

在您列出的第二个媒体查询中，这是缩小浏览器时将激活的第一个媒体查询，您将它告诉display: none，它将隐藏元素并删除它占用的空间。您还设置了visibility: hidden，它只会隐藏元素，但不会删除它占据的空间。在这里使用可见性是多余的。

在第一个媒体查询中，这是在缩小浏览器时将激活的第二个媒体查询，您将其告知display: block，这将撤消之前的display: none，但您仍需设置@987654325 @，而不是将其切换为visibility: visible，因此该元素仍然不会显示。

这是一个简单的移动优先方法示例，而不是像您的示例那样的桌面优先方法来显示/隐藏一个类。

.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 */
  }
}

Answer 2

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

手机屏幕

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

我希望它可以工作，目前无法测试