css - 隐藏智能手机/平板电脑上的 float 菜单

标签 css smartphone

我在我管理的网站上使用 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/

相关文章:

android - 如何在 HTML 中放置一个链接以在智能手机中打开 Viber/Whatsapp/iMessages/Facetime?

jQuery Mobile CDN 与本地 CDN

css - 网站页面挤压影响文本框架

jquery - 为什么 Tipsy jQuery 插件对我不起作用?

css - 如何在 HTML 中强制断字?

javascript - 图像映射的悬停和选定状态

css - 智能手机的字体和字体大小单位

css - 移动网站未呈现

html - 表格单元格上的文本溢出省略号在 IE8 和 IE9 中不起作用

html - 添加 margin-top 导致页面扩展