Question

@import url('https://fonts.googleapis.com/css?family=Raleway');


.navibar{
  background: rgba(20, 21, 22, .10);
  text-align: center;
  position: absolute;
  z-index: 999;
  box-shadow: -1px 2px 5px black;
  width: 100%;

}

.nav-toggle {
  display: none;
}

.nav-toggle-label{
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: white;
    height: 2px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after{
    content: '';
    position: absolute;
}

.nav-toggle-label span::before{
  bottom: 7px;
}
.nav-toggle-label span::after{
  top: 7px;
}

nav{
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background: rgba(20, 21, 22, .4);
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-family: 'Raleway', sans-serif;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  user-select: none;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
   transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}
.center{
  color: white;
 position: absolute;
 padding: -101px 0;
 border: 1px solid black;
 box-shadow: -1px 1px 100px black;
 -webkit-text-stroke: 2px black;
 text-align: center;
 font-size: 70px;
 width: 30%;
 top: 50%;
 left: 50%;
 margin-right: -50%;
 transform: translate(-50%, -50%);
}

@media screen and (min-width: 600px) {
  /*This should hide center when using mobile but for some reason it doesn't work am i doing something wrong?*/
  .center {
    display: none;
  }
  .nav-toggle-label{
    display: none;
  }

  .navibar{
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }
  .logo{
    grid-column: 2 / 3;
  }

  nav{
    all: unset;
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }
  nav a {
    opacity: 1;
    position: relative;
  }
  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    bottom: -.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }
  nav a:hover::before{
    transform: scale(1,1);
  }
}


.parheader{
  box-sizing: border-box;
  min-height: 20vh;
  padding: 45vw 0 5vw;
  position: relative;
  transform-style: inherit;
  width: 100vw;
}

.parheader, .parheader:before{
  background: 50% 50% / cover;
}

.parheader::before{
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-image: url(../kuvat/header.jpg);
  background-size: cover;
  transform-origin: center center 0;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  min-height: 100vh;
}

  .parheader * {
    font-weight: normal;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 1em 0;
    height: 1em;
    position: relative
  }

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-laptop,.fa-bug {font-size:200px}
</style>
<body>
<!-- Navbar -->

<header>
      <div class="navibar">
        <a href="index.php"><img src="kuvat/logo.png" alt="logo" class="logo"></a>
      <input type="checkbox" id="nav-toggle" class="nav-toggle">

      <nav>
        <ul>
          <li><a href="index.php">Etusivu</a></li>
          <li><a href="sivut/tehtavat.php">Tehtävät</a></li>
          <li><a href="#">Tietoa</a></li>
          <li><a href="#">ota yhteyttä</a></li>
          <li><a href="#">Kirjaudu sisään</a></li>
        </ul>
      </nav>
      <label for="nav-toggle" class="nav-toggle-label">
        <span></span>
      </label>
      </div>

</header>


<!-- Header -->
<header>
    <div class="parheader">
    </div>
    <div class="center">
  <p>KOTISIVU</p>
</div>
</header>


</body>
</html>

因此，我只是想学一点点，就没有给navigatorbar留下什么令人印象深刻的东西，而我遇到了这个奇怪的问题。当我在移动设备上尝试操作时，它仍然显示面板和文本，这些应该隐藏起来，以便你们中的任何人都可以帮助我。我面临的一些问题的屏幕截图：

Screenshot 1

Screenshot 2

不确定从这些照片中是否可以看到任何东西，但是由于某些原因透明面板和文本不会消失，因此请帮助我。不要介意它只是在周围测试的外观，我真的很想让它正常工作。 Stackoverflow出于某种原因要我键入更多详细信息。隐藏其他东西就像该下拉按钮一样正常，但该面板无法做到。

Answer 1

更改此行

 @media screen and (min-width: 600px)

对此：

 @media screen and (max-width: 600px)

说明：

max-width：600px //表示对宽度小于600px的屏幕尺寸进行媒体查询

min-width：600px //表示对宽度大于600px的屏幕尺寸进行媒体查询

也了解媒体查询也可能取决于屏幕高度。在这种情况下，您要处理max-height和min-height

CSS不会在较小的屏幕上隐藏东西

1 个答案: