响应式菜单无法在手机上完全运行答案

【问题标题】：responsive menu not fully working on phones响应式菜单无法在手机上完全运行
【发布时间】：2019-07-12 09:24:21
【问题描述】：

我发现这个带有显示 flex 的响应式顶部菜单，当我在手机的汉堡菜单中打开它时，它不存在，但是当我降低浏览器的分辨率时，会显示汉堡菜单。

请帮我找到一些响应式顶部菜单，其中使用了 display flex 并在所有设备上完全工作。

header {
    background: #7EA6E0;
    width: 100%;
}

a {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
}

nav {
    max-width: 1180px;
        height: 80px;
    margin: 0px auto;
    display: -webkit-flex;
    display: flex;
        -ms-align-items: center;
    align-items: center;
}

h1 {
        color: #fff;
    margin-left: 10px;
    margin-right: auto;
        font-size: 24px;
        font-family: 'Rock Salt', cursive;
}

ul {
        display: -webkit-flex;
        display: flex;
    list-style: none;
}

ul li a {
    color: #fff;
    margin: 0px 10px;
    padding: 10px;
    border-radius: 5px;
}

.nav__icon,
.nav__icon span {
    display: none;
}

.nav__icon {
    width: 36px;
    height: 28px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

.nav__icon span {
    background: rgba(255, 255, 255, 1);
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px;
}

.nav__icon span:nth-of-type(1) {
    top: 0;
}

.nav__icon span:nth-of-type(2) {
    top: 12px;
}

.nav__icon span:nth-of-type(3) {
    bottom: 0;
}

.nav__icon.active span:nth-of-type(1) {
    -webkit-transform: translateY(12px) rotate(-45deg);
    transform: translateY(12px) rotate(-45deg);
}

.nav__icon.active span:nth-of-type(2) {
    display: none;
}

.nav__icon.active span:nth-of-type(3) {
    -webkit-transform: translateY(-12px) rotate(45deg);
    transform: translateY(-12px) rotate(45deg);
}

@media only screen and (max-width: 700px) {
    header {
        position: relative;
        z-index: 999;
    }
    h1 {
        margin: 0 auto;
        }
        ul {
                -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
                background: rgba(0, 0, 0, .8);
        position: absolute;
        top: 80px;
        left: 0px;
        width: 100%;
        z-index: 980;
    }
    ul li {
        padding: 10px;
        text-align: center;
    }
    ul li a {
                display: block;
        background: transparent;
        margin: 0px;
        padding: 20px;
    }
    ul li a:hover {
        color: #000;
        background: #fff;
    }
    .nav__icon,
    .nav__icon span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
        z-index: 999;
    }
}

【问题讨论】：

@media only screen and (max-width: 700px) { 正在定义仅适用于宽度为 700 像素或更小的 CSS 规则。如果这不是您想要的，您可以随时增加最大宽度
能否提供菜单链接？
我同意安迪的观点，如果没有链接，或者至少没有 HTML 标记，就无法真正诊断出来。由于 .nav__icon 是 display: inline-block，其他项目可能会影响它。顺便说一句，您是否尝试过浏览器开发者工具中的“切换设备工具栏”？它仍然在那里发生吗？
请张贴菜单的 HTML。请阅读：How to create a Minimal, Complete, and Verifiable example

标签： jquery css flexbox responsive

【解决方案1】：

对不起，我忘记添加 html sry

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>FlexBox Responsive Menu-css</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


	<link rel="stylesheet" href="css/style.css">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

	<header id="header" role="heading">
		<nav>
			<h1 class="logo">Panda Custom</h1>
			<ul>
				<li><a href="#">menu 1</a></li>
				<li><a href="#">menu 2</a></li>
				<li><a href="#">menu 3</a></li>
				<li><a href="#">menu 4</a></li>
			</ul>
			<div class="nav__icon">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</nav>
		<!--/Nav-->
	</header>
	<!--/Header-->
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>



	<script src="js/index.js"></script>




</body>

</html>

【讨论】：