Скрытие плавающего меню на смартфонах/планшетах

Я использую плавающее меню на веб-сайте, которым я управляю. Он отлично работает на компьютере, но полностью мешает при посещении сайта на планшете или смартфоне.

Есть ли умный способ скрыть это плавающее меню для смартфонов и планшетов? (Скрыть его на смартфонах важнее, чем на планшетах)

МОЙ 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>

С уважением Пит


css smartphone
person Crabfish78    schedule 24.03.2015    source источник
comment
используйте медиазапросы   -  person Max Novich    schedule 24.03.2015

Ответы (1)


arrow_upward
1
arrow_downward 

@media (max-width: 600px) {
  div.floating-menu {
    display: none;
  }

Этот стиль будет применяться только к представлениям браузера с шириной менее 600 пикселей (смартфоны и планшеты).

Взгляните на это: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

person jackstruck    schedule 24.03.2015