Question

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

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

@media（min-width：768px）和（max-width：980px）

@media（max-width：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>

JS

    <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;
}
}

之后，响应式菜单不再有效。

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

Answer 1

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

嵌入在HTML代码段中的代码，以便于测试：

＆＃13;

<!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>

＆＃13;

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

1 个答案: