使列表元素在移动设备上不可见（响应式）答案

【问题标题】：Making a list element invisible on mobile (responsive)使列表元素在移动设备上不可见（响应式）
【发布时间】：2014-09-21 11:22:28
【问题描述】：

我一直在网上寻找一些解决方案，但都失败了，甚至不适合我的问题。

我有一个顶部有菜单的响应式网站。该菜单还包括一个下拉菜单项：

        <header id="header">
            <nav id="nav">
                <ul><li><a href=".html">Item 1</a></li>
                    <li class="submenu">
                        <a href=""><img src="images/list-icon.png" width="15px"></a>
                        <ul>
                            <li><a href=".html">Sub-Item 1</a></li>
                            <li><a href=".html">Sub-Item 2</a></li>
                        </ul>
                    </li>
                <li><a href=".html">Item 2</a></li>
                </ul>
            </nav>
       </header>

（我把它简化了一点，但我希望你明白）

我已经解决了不同样式表的响应问题（所以不是@media thingys），我愿意让下拉菜单项仅在一个样式表中不可见（在智能手机上）。我已经尝试过这些：

#header .submenu {
     visibility: hidden;
     display: none;
}
.submenu {
    visibility: hidden;
    display: none;
}
#header nav ul li.submenu {
     visibility: hidden;
     display: none;
} 
#header .submenu {
     visibility: hidden;
     display: none;
}
.submenu {
    visibility: hidden;
    display: none;
}
header nav ul li.submenu {
    visibility: hidden;
    display: none;
}

（菜单列表位于 /header/ 标签内，其 id="header"）

我对这整个响应式的东西很陌生，所以这个问题可能看起来很愚蠢或什么的，但自从我浏览了 stackoverflow.com 以来，幸运的是你们总是对彼此友善。提前致谢。

【问题讨论】：

标签： html css menu visibility

【解决方案1】：

除非您的帖子中有错字，否则您会从header nav ul li.submenu {} 中丢失#。

#header .submenu {
    visibility: hidden;
    display: none;
}
.submenu {
    visibility: hidden;
    display:none;
}
#header nav ul li.submenu {
    visibility: hidden;
    display: none;
} 
#header .submenu {
    visibility: hidden;
    display: none;
}
.submenu {
    visibility: hidden;
    display:none;
}
#header nav ul li.submenu {
    visibility: hidden;
    display: none;
}

出于兴趣，您能解释一下为什么不想使用媒体查询吗？

@media only screen and (max-width: 1024px){
   #header .submenu {
     display: none;
   }
}

这将隐藏在宽度为 1024 像素或更小的任何设备上的 #header 内的所有 .submenu 上。对于移动设备，您可能会看到不到 600 像素。

【讨论】：

嗯，最后两组 CSS 是一个错误，因为 .submenu 之前包含在内，是的，需要 # 。好吧...起初我开始阅读很多关于响应式网站的内容，这种方式似乎更容易修改。现在我发现它不是，但由于一些时间限制，我现在无法重做整个事情
这解决了您的问题吗？ --- 媒体查询是迄今为止更简单的选择，请确保为您的下一个站点查看它们！
很遗憾没有。 :(
遗憾的是没有，但是否可以仅通过媒体查询参考解决这部分响应？我的意思是例如从智能手机css文件中删除任何连接到表的内容并包含该大小的媒体查询参考？有什么想法吗？
首先感谢您的不懈帮助，但它仍然无法正常工作。老实说，如果解决起来这么复杂（我也经历过相关的 .js ），那真的不值得，不愿意在这样的事情上浪费你宝贵的时间

【解决方案2】：

对于媒体查询参考，一个很好的资源是： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

此外，使用样板和预处理器将有助于解决许多响应式设计问题。

【讨论】：