CSS 媒体多重查询在语句占主导地位时不起作用

Question

我想用 Html、CSS 和 javascript 制作一个网站。目前，我面临的问题是多个媒体查询（在 CSS 中）不能同时工作。

我已经看过关于此主题的类似问题，他们说您可以嵌套多个查询，但两个以上的媒体查询似乎仍然不起作用（尽管下面的代码未嵌套）。

我的目标是导航栏的淡入/淡出在每个高度和宽度上都流畅（这会起作用，但现在不会，因为查询太多）。在 (min-width: 961px) 和 (max-width: 1101px) 之间，max-width 应该比 else (60%) 大 (80%)，这样元素 Über uns仍然在显示的一行上。当屏幕尺寸介于 (max-width: 961px) 和 (max-height: 501px) 之间时，下拉菜单显示时的 vh 应为 75vh。最后但同样重要的是，如果屏幕尺寸小于 961px，它应该只显示菜单按钮。

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Avisch</title>
    <link rel="stylesheet" href="Startseite.css" />
  </head>
  <body>
    <nav class="navbar">
      <div class="navbar__container">
        <a href="/" id="navbar__logo">AVISCH</a>
        <div class="navbar__toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="navbar__menu">
          <li class="navbar__item">
            <a href="Startseite.html" class="navbar__links">Startseite</a>
          </li>
          <li class="navbar__item">
            <a href="Ueber_uns.html" class="navbar__links">Über uns</a>
          </li>
          <li class="navbar__item">
            <a href="Blog.html" class="navbar__links">Blog</a>
          </li>
          <li class="navbar__item">
            <a href="Kontakt.html" class="navbar__links">Kontakt</a>
          </li>
        </ul>
      </div>
    </nav>
    <script language="javascript" type="text/javascript" src="app.js"></script>
  </body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Kumbh Sans", sans-serif;
}

.navbar {
  background: #d4d4cc;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999; /*Damit Navbar immer sichtbar ist*/
  box-shadow: inset -26.0416vw 0px 26.0416vw -18.22916vw #131313,
    inset 26.0416vw 0px 26.0416vw -18.22916vw #131313;
}

.navbar__container {
  background: #131313;
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 67.708333333333333333333333333333%;
  margin: 0 auto;
  padding: 0 50px;
  box-shadow: inset 26.0416vw 0px 26.0416vw -17.447916666666666666666666666667vw
      #d4d4cc,
    inset -26.0416vw 0px 26.0416vw -17.447916666666666666666666666667vw #d4d4cc;
}

#navbar__logo {
  background-color: #ff8177;
  background-image: linear-gradient(to right, #131313 45%, #ee1d23 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2.5rem;
  font-weight: bold;
}

.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  text-align: center;
}

.navbar__item {
  height: 50px;
  margin: 5px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
}
.navbar__links:hover {
  background: #b8151b;
  border: none;
  outline: none;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

@media screen and (max-width: 961px) {
  .navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0;
  }

  .navbar__menu {
    display: grid;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    position: absolute;
    top: 100%;
    top: -1000px;
    opacity: 0;
    transition: all 0.5s ease;
    height: 60vh;
    z-index: -1;
    background: #131313;
  }

  .navbar__menu.active {
    background: #131313;
    box-shadow: inset 500px 0px 500px -450px #d4d4cc,
      inset -500px 0px 500px -450px #d4d4cc;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height: 60vh;
    font-size: 1.6rem;
  }

  #navbar__logo {
    padding-left: 25px;
  }

  .navbar__toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background: #000;
    display: block;
    cursor: pointer;
  }

  .navbar__item {
    width: 100%;
    margin: 0;
  }

  .navbar__links {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 100%;
    display: table;
  }

  .navbar__links:hover {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
  }

  #mobile-menu {
    position: absolute;
    top: 20%;
    right: 5%;
    transform: translate(5%, 20%);
  }

  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
  }

  #mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  #mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media screen and (min-width: 1101px) {
  .navbar__container {
    max-width: 67.708333333333333333333333333333%;
  }
}

@media screen and (min-width: 961px), screen and (max-width: 1101px) {
  .navbar__container {
    max-width: 80%;
  }

@media screen and (max-width: 961px) and (max-height: 501px) {
  .navbar__menu.active {
    height: 75vh;
  }
}

Answer 1

关于宽度的问题，你的基本问题是这一行：

@media screen and (min-width: 961px), screen and (max-width: 1101px)

当您在媒体规则中使用逗号时，它相当于逻辑或。因此，如果宽度大于 961 或如果宽度小于 1101，则将应用此规则——这对所有宽度都是正确的。相反，您需要在这些条件之间使用逻辑 AND，以便规则仅适用于 between 这两个宽度：

@media screen and (min-width: 961px) and (max-width: 1101px)

我安排媒体查询的首选方式是遵循 mobile-first 设计原则，首先列出窄视口规则，然后按宽度递增的顺序添加针对较宽视口的媒体查询。这样一来，每个媒体查询都会覆盖它需要的任何样式，覆盖它需要的任何宽度，并且您不会纠结于 AND 和 OR。

.navbar__container {
  width: 100%;                    /* narrow viewports */
}

@media (min-width: 961px) {
  .navbar__container {
    max-width: 80%;               /* medium viewports */
  }
}

@media (min-width: 1101px) {
  .navbar__container {
    max-width: 68%;               /* wide viewports */
  }
}

CSS 媒体多重查询在语句占主导地位时不起作用

CSS media multiple queries doesn't work when the statements are overarching

css

media-queries