Question

在我的页面上（在visal.de/trb/上在线测试）我当前尝试隐藏一个元素并在用户移动时显示另一个元素。被阻止的元素是顶部导航（Glossar＆amp; 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，但是您＆＃39 ;仍然设置visibility: hidden，而不是将其切换为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;
   }
 }

我希望它现在可以立即进行测试

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

2 个答案: