媒体查询不会更改移动视图的横幅图像显示 属性

Question

因此，在我的移动视图中，我希望横幅显示我的移动图像，并且我在媒体查询中交替显示属性。这是我在 Stack 上的第一个问题，如果我遗漏了什么请见谅。

<div class="row">
  <div class="image-container">

    <img class="desktopimage" src="../resources/images/indeximage.jpg" alt="">
    <img class="mobileimage" src="../resources/images/mobileindeximage.jpg" alt="">

  </div>



  <div class="intro-container">
    <div class="intro">
      <h2>Work hard today, Be Lean tomorrow.</h2>

      <h4></h4>

      <p></p>

    </div>
  </div>
</div>

然后在这里我有了它的 scss，浏览器中的 DevTools 划掉了媒体查询中的 **display:block** 属性。

        .banner {
          display: flex;
          width: 100%;
          flex-direction: column;
          position: relative;

          .row {
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;

            .image-container {
              min-width: 100%;

              .desktopimage {
                width: 100%;
                height: 95vh;
              }

              .mobileimage {
                display: none;
                width: 100%;
                height: 100vh;
              }
            }

            .intro-container {
              display: flex;
              justify-content: center;
              background-color: rgb(255, 255, 255);
              position: absolute;
              border-radius: 20px;
              opacity: 0.9;
              right: 1rem;

              .intro {
                text-align: center;
                opacity: 0.9;
                padding: 1em;
                color: rgb(7, 6, 6);

                h2 {
                  font-family: 'Permanent Marker', cursive;
                  color: rgb(0, 0, 0);
                }
              }
            }
          }
        }
        @media (max-width: 900px) {
          .desktopimage {
            display: none;
          }

          .mobileimage {
            display: block;
          }
        }

Answer 1

您需要在选择器中添加 .banner .row .image-container（即您的两个 类 嵌套在您的 sass 代码中的元素）以达到至少相同级别的 CSS规格默认样式：

@media (max-width: 900px) {
 .banner .row .image-container {
      .desktopimage {
        display: none;
      }

      .mobileimage {
        display: block;
      }
   }
}