响应式菜单不适用于媒体查询答案

【问题标题】：Responsive menu doesn't work with media queries响应式菜单不适用于媒体查询
【发布时间】：2017-11-21 14:16:42
【问题描述】：

我的网站上有一个响应式菜单。现在我正在尝试通过媒体查询来响应网站的其他部分。

我添加了这 2 个媒体查询，但在那之后，响应式菜单不再起作用，我不知道为什么。

@media（最小宽度：768px）和（最大宽度：980px）

@media（最大宽度：767px）

这是菜单的代码：

CSS

.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; /*overflow help you to create a new row below because you used float left*/
    background-color: #f6f6f6;
    border: 1px solid #d1d1d1;
}

.topnav a {

    float: left;
    border-left: 1px solid #d1d1d1;
    display: block; /*"li a" is an inline element by default so we have to convert it in block element for modify the layout*/
    color: #0099cc;
    text-align: center;
    padding: 14px 22px;
    text-decoration: none;
}


.topnav .active {
    background-color: #f29323;
    color: #ffffff;
}

.topnav a:hover {
    text-decoration: none;
}


.topnav a:hover:not(.active) {
    background-color: #f29323;
    color: #fff;
    text-decoration: none;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {
      display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {
      position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}

@media screen and (max-width: 600px) {
  .topnav {
    padding: 0 0;
  }
}

HTML

<div class="topnav" id="myTopnav">
    <a <?php echo ($page == "information") ? "class='active'" : ""; ?> href="/nutickets2/index.php">INFORMATION</a>
    <a <?php echo ($page == "report") ? "class='active'" : ""; ?> href="/nutickets2/report.php">Tickets</a>
    <a href="">Info</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

    <script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
    </script>

这是我为使网站响应而添加的代码：

@media (min-width: 768px) and (max-width: 980px) {

.text-head-div div {
    display: block;
}

.text-head-div span {
    display: block;
}
}

@media (max-width: 767px) {

.text-head-div div {
    display: block;
}

.text-head-div span {
    display: block;
}
}

此后，响应式菜单不再起作用。

如果我删除最后一个代码，响应式菜单将重新启动。

【问题讨论】：

这个类在 HTML text-head-div 中在哪里？请正确解释问题。
你的text-head-div元素在html中在哪里？

标签： html css menu responsive-design response

【解决方案1】：

text-head-div 元素是什么样的？它或其子元素是否有任何固定宽度的元素？

嵌入在 HTML sn-p 中的代码以便于测试：

<!DOCTYPE html>
<html>
<head>

	<style type="text/css">
	      .topnav {
	         list-style-type: none;
	         margin: 0;
	         padding: 0;
	         overflow: hidden; /*overflow help you to create a new row below because you used float left*/
	         background-color: #f6f6f6;
	         border: 1px solid #d1d1d1;
	      }

	      .topnav a {

	         float: left;
	         border-left: 1px solid #d1d1d1;
	         display: block; /*"li a" is an inline element by default so we have to convert it in block element for modify the layout*/
	         color: #0099cc;
	         text-align: center;
	         padding: 14px 22px;
	         text-decoration: none;
	      }


	      .topnav .active {
	         background-color: #f29323;
	         color: #ffffff;
	      }

	      .topnav a:hover {
	         text-decoration: none;
	      }


	      .topnav a:hover:not(.active) {
	         background-color: #f29323;
	         color: #fff;
	         text-decoration: none;
	      }

	      .topnav .icon {
	       display: none;
	      }

	      @media screen and (max-width: 600px) {
	       .topnav a {
	           display: none;
	       }
	       .topnav a.icon {
	         float: right;
	         display: block;
	       }
	      }


	      @media screen and (max-width: 600px) {
	       .topnav.responsive {
	           position: relative;
	       }
	       .topnav.responsive .icon {
	         position: absolute;
	         right: 0;
	         top: 0;
	       }
	       .topnav.responsive a {
	         float: none;
	         display: block;
	         text-align: left;
	       }

	      }

	      @media screen and (max-width: 600px) {
	       .topnav {
	         padding: 0 0;
	       }
	      }

	      @media (min-width: 768px) and (max-width: 980px) {

	      .text-head-div div {
	         display: block;
	      }

	      .text-head-div span {
	         display: block;
	      }
	      }

	      @media (max-width: 767px) {

	      .text-head-div div {
	         display: block;
	      }

	      .text-head-div span {
	         display: block;
	      }
	      }
	</style>
	<title></title>
</head>
<body>
	<div class="topnav" id="myTopnav">
		<a href="/nutickets2/index.php">INFORMATION</a> 
		<a class="active" href="/nutickets2/report.php">Tickets</a> 
		<a href="">Info</a> 
		<a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">&#9776;</a>
	</div>
	<script>
	      function myFunction() {
	         var x = document.getElementById("myTopnav");
	         if (x.className === "topnav") {
	             x.className += " responsive";
	         } else {
	             x.className = "topnav";
	         }
	      }
	</script>
</body>
</html>

【讨论】：