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

Posted 2023-03-06

【中文标题】媒体查询不会更改横幅图像的移动视图显示属性

【英文标题】：Media query does not change banner image's display property for mobile view

【发布时间】：2021-09-23 12:00:04

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

      .mobileimage 
        display: block;
      
   

【讨论】：

非常感谢，我真傻。我认为在媒体查询中，查询将直接针对我想要的元素，没有特异性。