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

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

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

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

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

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

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

我希望它能工作现在不能测试它

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

Hide a navigation element while on desktop, show it only mobile

css

mobile

hide

element