在我的页面上（通过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;
}
但似乎没有任何效果。我猜是因为代码不止一次说应该在任何时候显示，但最后说不应该显示。这可能是发生错误的原因。有人知道解决方法或我做错了什么吗？
带有最大宽度的媒体查询告诉浏览器在浏览器缩小到该大小时应用样式。最小宽度则相反。它告诉浏览器在浏览器增长到该大小时应用样式。
在您列出的第二个媒体查询中，这是第一个在缩小浏览器时将激活的查询，您要告诉它display: none隐藏元素并删除其占用的空间。您还设置了visibility: hidden仅隐藏元素但不会删除其占用空间的设置。在这里使用可见性是多余的。
在第一个媒体查询中，这是第二个在缩小浏览器时将激活的查询，您要告诉它display: block哪个将撤消上一个查询display: none，但是您仍在设置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 */
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句