Question

我做了一个响应菜单栏，在屏幕 max-width = 850像素中折叠了。它在桌面不同大小中正常工作。但不适用于移动设备。 jquery responsive javascript menu-bar media-query css html

  

  $(document).ready(function(){
    			$(".showMenu").click(function(){
    				$(".objs").slideToggle("slow");
    			});
    		});

   

 #menu{
    	background-color: gray;
    	height: 50px;
    }

    .obj{
    	display: inline-block;
        background-color: wheat;
        margin: 2px;
        width: 100px;
        text-align: center;
        height: 26px;
        border:0;
    }

    .showMenu {
    	display: none;
        height: 100%;
        background-color: inherit;
        border: 0;
        color: black;
        outline: 0;
    }
    @media screen and (min-width: 850px){
    	.objs{
    		display: block !important;
    	}
    	.obj{
    		display: inline-block !important;
    	}
    	.showMenu{
    		display: none;
    	}

    }
    @media screen and (max-width: 850px){
    	.objs{
    		display: none;
    		width: 100%;
    		background-color: wheat;
    	}
    	.obj{
    		width: 90%;
    	}
    	.showMenu{
    		display: block;
    	}

    }

<!DOCTYPE html>
<html>
<head>
	<title>Responsive Menu</title>
	<link rel="stylesheet" type="text/css" href="menu.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
	<div id="menu">
		<button class="showMenu">MENU</button>
		<div class="objs">
			<button class="obj">1</button>
			<button class="obj">2</button>
			<button class="obj">3</button>
			<button class="obj">4</button>
			<button class="obj">5</button>
			<button class="obj">6</button>	
		</div>
	</div>
</body>
</html>

Answer 1

只需添加下面编码的html标题标记

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

我的响应式菜单在移动设备中不起作用

1 个答案: