我在我管理的网站上使用 float 菜单。它在计算机上运行良好,但在平板电脑或智能手机上访问网站时却完全受阻。
有没有巧妙的方法来隐藏智能手机和平板电脑的 float 菜单? (隐藏在智能手机上比平板电脑更重要)
我的 CSS:
div.floating-menu {position:fixed;left: 0px;background-image: url("/meny-cirkel.png");width:113px; height:225px; z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
我的 HTML:
<div class="floating-menu">
<p style="text-align: left; margin-bottom: 25px; margin-top: 30px; margin-left: 0px;"><a class="link-floatingmenuheading" href="#top">Menu</a></p>
<a class="link-floatingmenu" href="#criteria">Draft Criteria</a>
<a class="link-floatingmenu" href="#process">The process</a>
<a class="link-floatingmenu" href="#comment">Comment</a>
<a class="link-floatingmenu" href="#news">News</a>
</div>
亲切的问候 皮特
最佳答案
@media (max-width: 600px) {
div.floating-menu {
display: none;
}
此样式仅适用于宽度小于 600px 的浏览器 View (因此智能手机和平板电脑)
看看这个:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
关于css - 隐藏智能手机/平板电脑上的 float 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29233552/