我在我的网站上创建了 CSS 移动菜单，它在我的笔记本电脑上运行良好。当我在 680px 下最小化笔记本电脑上的浏览器时，默认菜单变成了移动菜单，但在智能手机上不能那样工作，它会保留默认菜单。我做错了什么？
/* CSS Document */
body{
font-family: 'Prompt', Sans-serif;
background-image: url(wallpaper.png);
background-color:#ECCB6C;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
text-align: center;
}
header{
background-image:url(logo.png);
background-repeat:no-repeat;
background-position:bottom left;
width:60%;
height:220px;
margin:0 auto;
padding:0;
}
nav{
width:70%;
height:auto;
margin:0 auto 3px auto;
background-image:url(hfbkg.png);
padding:0 80px 0 80px;
}
nav ul{
overflow:hidden;
padding:0;
text-align:center;
margin:0;
transition:max-height 0.4s;
-webkit-transition:max-height 0.4s;
-ms-transition:max-height 0.4s;
-moz-transition:max-height 0.4s;
-o-transition:max-height 0.4s;
}
nav ul li{
display:inline-block;
padding:5px 7px;
}
nav ul li:hover{
background-color:#FFFFFF;
}
.handle {
width:100%;
text-align:left;
box-sizing:border-box;
padding:15px 10px;
cursor:pointer;
color:#FFFFFF;
display:none;
}
@media screen and (max-width: 680px){
nav ul{
max-height:0;
}
.showing{
max-height:20em;
}
nav ul li{
box-sizing:border-box;
width: 100%;
padding:15px 0px;
margin:0;
text-align:left;
}
.handle{
display:block;
}
}
@media (max-width:680px){
#kontakt{
width:100%;
}
#iframe{
width:100%;
}
}
section{
width:70%;
height:auto;
background-image:url(textbkg.png);
line-height:1.5em;
font-size:1.1em;
padding:60px 80px;
margin:0 auto;
clear:both;
}
section a:link {
color:#000000;
}
section a:hover {
text-decoration: none;
color:#FFAE00;
}
section a:visited {
text-decoration: none;
color:#000000;
}
#textarea{
width:350px;
height:200px;
padding:2px;
margin:5px;
}
#ime{
width:350px;
height:20px;
padding:2px;
margin:5px;
}
#email{
width:350px;
height:20px;
padding:2px;
margin:5px;
}
#decoupauge img{
margin:1%;
border: thick solid;
with: 15px;
color: #353439;
padding:2px;
}
#ukrasi img{
margin:1%;
border: thick solid;
with: 15px;
color: #353439;
padding:2px;
}
#sponzori{
margin:5%;
align-content:center;
}
#kontaktobr{
width:400px;
height:auto;
margin:20px 0;
padding:10px;
float:left;
}
#iframe{
float:right;
margin:20px 0;
padding:10px;
}
#adresa { /* pošto su iframe i kontakt obrazac u floatu u adresi ne smije biti float zato što adresa razvlači section background do footera */
width:410px;
height:auto;
margin:10px;
padding:20px;
}
#adresa p {
margin:0px;
padding:0;
}
#adresa a:link{
color:#000000;
text-decoration: none;
}
#adresa a:hover{
text-decoration: none;
color:#FFAE00;
}
footer{
width:70%;
height:auto;
margin:3px auto 0 auto;
background-image:url(hfbkg.png);
padding:5px 80px;
text-align:end;
color:#FFFFFF;
clear:both;
}
footer a:hover{
color:#FBEE9A;
}
a{
margin:0;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#FFFFFF;
}
a:hover {
text-decoration: none;
color:#363539;
}
a:active {
text-decoration: none;
color: #363539;
}
p{
text-align:justify;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
<style type="text/css">
body,td,th {
font-family: Prompt, Sans-serif;
}
</style>
</head>
<body background="wallpaper.png">
<header>
</header>
<nav>
<ul>
<a href="index.html"><li>Početna</li></a>
<a href="terapija.html"><li>Terapije</li></a>
<a href="galerija.html"><li>Glerija</li></a>
<a href="donacije.html"><li>Donacije</li></a>
<a href="linkovi.html"><li>Linkovi</li></a>
<a href="kontakt.html"><li>Kontakt</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
<h3><strong>O nama</strong></h3>
<p> Udruga je počela sa radom 2013. godine..</p>
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
<footer>
<a>Copyright 2016</a>
</footer>
</body>
</html>最佳答案
您没有定义视口(viewport)？
在 <head> 中需要一个元标记工作:
<meta name="viewport" content="width=device-width, initial-scale=1" />
关于css - 手机菜单不显示在手机上，只显示在桌面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39701583/