我对 CSS 中的整个响应式设计非常陌生。我刚刚制作了一个有效的响应式菜单，当我缩小浏览器窗口时，它在我的 PC 上运行良好，但是当在我的手机上加载网站时，它只是缩小并且不会将菜单显示为响应式菜单。
我不知道为什么会这样，任何人？我已将最大宽度设置为 900 像素，因此如果窗口太短，我的菜单实际上会崩溃。
这是菜单的 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()">☰</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;*/
}
}
最佳答案
您可能需要添加一个 <meta>在你的<head> :
<meta name="viewport" content="width=device-width, initial-scale=1">
要知道如何正确使用这个<meta> (您可以在 content 属性中放置更多值)，您可以阅读本指南:
Using the viewport meta tag to control layout on mobile browsers
关于jquery - 响应式菜单不适用于移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42222701/