Question

一旦屏幕小于670像素，我试图让#logo元素消失。它的工作原理是徽标消失但是出于某种原因它需要我的导航。为什么我的导航ul消失了？

守则：

header {
  position: fixed;
  background-image: url(img/grey-bg.jpg);
  background-size: cover;
  width: 100%;
  height: 8%;
  min-height: 50px;
  z-index: 2;
}
header nav ul {
  position: relative;
  margin-top: -28px;
  margin-right: 5%;
  z-index: 3;
}
header li {
  font-size: 1rem;
  font-family: 'Cabin Sketch', cursive;
  float: right;
  color: #fff;
  padding-right: 30px;
  z-index: 3;
}
#logo {
  height: 75%;
  margin-top: 5px;
  margin-left: 10%;
}
@media screen and (max-width: 670px) {
  #logo {
    display: none;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jovial Entertainment | Home</title>
    <link href="main.css" type="text/css" rel="stylesheet"/>
    <link href='https://fonts.googleapis.com/css?family=Cabin+Sketch'rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="#"><img src="img/JOVIAL-LOGO-TEXT.png" id="logo"/></a>
      <nav>
        <ul>
          <li>VIDEOS</li>
          <li>ABOUT</li>
          <li>PHOTOS</li>
          <li>CONTACT</li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Answer 1

因为您将其更改为display: none，因此页面上不再存在，因此没有任何内容可以占用曾经的空间，因此您的导航将移动到徽标所在的位置。请改为visibility: hidden。

Answer 2

导航中有负余量，因此一旦删除徽标，导航就会超出屏幕顶部。您需要在媒体查询中将导航顶部的边距设置为零。

媒体查询目标错误的元素？

2 个答案: