响应式菜单无法在移动设备上工作

问题描述：

我对整个响应式CSS设计非常新颖。我只是制作了一个有效的响应式菜单，当我使浏览器窗口变小时，它在我的电脑上工作正常，但是在我的手机上加载网站时，它只是缩小，并不会显示菜单作为响应式菜单。响应式菜单无法在移动设备上工作

我不知道为什么这样做，任何人吗？我已经将最大宽度设置为900px，所以如果窗口太短，我的菜单就会崩溃。

这是菜单的HTML：

<ul class="topnav" id="myTopnav"> 
      <li><a href="#">Fonder</a></li> 
      <li><a href="#">Priser</a></li> 
      <li><a href="#">Produkter</a></li> 
      <li><a href="#">Frågor</a></li> 
      <li><a href="#">Juridik</a></li> 
      <li><a href="#">Om oss</a></li> 
      <li><a href="#" class="active">Hem</a></li> 
      <li class="icon"> 
       <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
      </li> 
     </ul>

这是JS：

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
    function myFunction() { 
     var x = document.getElementById("myTopnav"); 
     if (x.className === "topnav") { 
      x.className += " responsive"; 
     } else { 
      x.className = "topnav"; 
     } 
    }

这是响应CSS：

@media screen and (max-width:900px) { 
    ul.topnav li {display:none;} 
    ul.topnav li.icon { 
     float: right; 
     display: inline-block; 
     opacity: 1; 
    } 
} 
@media screen and (max-width:900px) { 
    ul.topnav.responsive {position:relative;} 
    ul.topnav.responsive li.icon { 
     position: absolute; 
     right: 0; 
     top: 0; 
     background-color: none; 
     opacity: 1; 
    } 
    ul.topnav.responsive li { 
     float: none; 
     display: inline; 
     position: relative; 
     top: 32px; 
    } 
    ul.topnav.responsive li a { 
     display: block; 
     text-align: right; 
     /*background-color: red;*/ 
    } 
}

请出示一些代码（即使是3线），我提出一个答案。 – AymDev

为什么在'@ media'查询中使用相同的'max-width：900px' –

您尝试使用引导程序3 –

答

你可能需要在您的<head>中加入<meta>：

<meta name="viewport" content="width=device-width, initial-scale=1">

要知道如何正确地使用这个<meta>（你可以把在content属性更多的值），你可以阅读本指南：
Using the viewport meta tag to control layout on mobile browsers

这似乎很有趣！将试试 –

@Condolent尝试它，并接受我的答案，如果它解决了你的问题:) – AymDev

那么，它的工作。但在移动设备上放大太多了。如果你尝试它，你会注意到文本更宽，是否有可能改变宽度，这一切都适合？ –

答

您可以使用引导为响应网站。这很容易实现。 http://getbootstrap.com/getting-started/

您还可以使用引导程序创建菜单。经过下面的链接

Bootstrap Menus

虽然没有使用bootstrap，但它会查看它！有没有可能只使用引导程序中的响应菜单，并由我自己完成剩下的工作？或者它只是一项大量的工作？ –

如果您将使用引导程序，您将不会面临此问题 –

即使Bootstrap执行此任务，框架也不是答案。这就像是在有人想知道如何建立后台时重新使用Wordpress ... – AymDev

响应式菜单无法在移动设备上工作

相关推荐