第三个@media max-width在CSS中不起作用

问题描述 投票：0回答：1

所以我正在尝试为不同的屏幕尺寸建立一个网站。现在我在其中包含了一个卡片部分，该部分已包含在我的网站中。现在，当我的屏幕处于全尺寸时，例如宽度>1300px时，它应该是5宽，现在当它达到1300px宽时，我不希望它改变，但当它达到1024px宽时，我希望它下降到3宽，它确实如此然而，一旦我到达 614 像素宽的部分，当屏幕尺寸大于 614 像素宽时，我希望它激活并将每行的显示数量更改为 2 个而不是 3 个。

5 wide 这就是我想要的当屏幕宽度 > 1024px 时它的样子

3 wide 一旦我到达< 1024px wide it goes to 3 wide just fine

should be 2 wide 但是一旦我超过了 614px 宽的标记 @media 屏幕，并且（最大宽度：614px）由于某种原因就不再启动 但是，如果我将其更改为 @media screen 和（最小宽度：614px），媒体更改确实会影响它，但它会阻止其余媒体效果的工作，我什至尝试切换其他媒体效果的最小值和最大值，我似乎什么也没有do 可以让他们单独工作

.third-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1420px;
    margin: 40px; 
    padding: 20px 20px 100px 20px;

}


.columnn2 {
    flex: 1;
    max-width: 170px;
    text-align: center;
    margin: 0 40px;
    box-sizing: border-box;
    

}

.card {
    background-color: rgba(255, 255, 255, 0.85) ;
    padding: 5px;
    width: 250px;
    height: 330px;
    transition: ease 0.5s;
    margin: 2px 2px;
}


.card img {
    display: block;
    width: 170px;
    max-width: 100%;
    height: 170px;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
    justify-content: center;
    transition: ease 0.5s;
}
.card h2{
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
    color: #232323;
    height: 80px;
    width: 200px
    

}
.card p{
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    color: #C49954;
}
.card a{
    border: 20px #C49954;
    padding: 2px;
}
.card hr{
    border: 2px solid #C49954;
    width: 50%;
    transition: ease 0.5s;

}
.card:hover hr{
    border: 2px solid #C49954;
    width: 75%;
    transition: ease 0.5s;
}
.card:hover{
    background-color: #FFFFFF;
    transition: ease 0.5s;
}
.card:hover img{
    transform: scale(1.1);
    transition: ease 0.5s;
    z-index: -1;
}
.card:hover h2{
    transform: scale(1.03);
    transition: ease 0.5s;
}
.card:hover p{
    transform: scale(1.03);
    transition: ease 0.5s;
}
.card:hover a{
    transform: scale(1.03);
    transition: ease 0.5s;
}
@media screen and (max-width: 1300px){
}

@media screen and (max-width: 1024px) and (min-width: 615px){

    }
    .column2{
        width: calc(33% - 60px);
        justify-content: center;
    }
    .card{
        width: calc(100% - 15px);
        margin: 2px 2px;
    }

}
@media screen and (max-width: 614px)
{
/*index.html styling*/

        
    }
    .column2{
        width: calc(50% - 60px);
        justify-content: center;
    }
    .card{
        width: calc(100% - 15px);
        margin: 2px 2px;
    }

  }
     <div class="third-main">
      <div class="column2">
        <div class="card">
          <img src="images/card-robo-mower.png" alt="Robotic Mowers">
          <br>
          <hr>
          <h2>Robotic Mowers</h2>
          <br>
          <p>Learn More</p> 

        </div>
 
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-commerical-mowers.png" alt="commerical Mowers">
          <br>
          <hr>
          <h2>Commerical Mowers</h2>
          <br>
          <p>Learn More</p> 

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-residential-mower.png" alt="Residential Mowers">
          <br>
          <hr>
          <h2>Residential Mowers</h2>
          <br>
          <p>Learn More</p>
        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-power.png" alt="Power Equipment">
          <br>
          <hr>
          <h2>Power Equipment</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-accessories.png" alt="Accessories & saftey gear">
          <br>
          <hr>
          <h2>Accessories & Saftey Gear</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-cargo.png" alt="Cargo Trailers">
          <br>
          <hr>
          <h2>Cargo Trailers</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-livestock.png" alt="Livestock Trailers">
          <br>
          <hr>
          <h2>Livestock Trailers</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-dump.png" alt="Dump Trailers">
          <br>
          <hr>
          <h2>Dump Trailers</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/Card-Utility.png" alt="Utility & Landscape">
          <br>
          <hr>
          <h2>Utility & Landscape Trailers</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card">
          <img src="images/card-heavy-duty.png" alt="Deckover">
          <br>
          <hr>
          <h2>Deckover Trailers</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card" id="card3">
          <img src="images/card-rentals.png" alt="Rentals">
          <br>
          <hr>
          <h2>Equipment Rentals</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card" id="card3">
          <img src="images/card-new-heavy.png" alt="New Heavy">
          <br>
          <hr>
          <h2>New Heavy Equipment</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card" id="card3">
          <img src="images/card-used-heavy.png" alt="Used Heavy">
          <br>
          <hr>
          <h2>Used Heavy Equipment</h2>
          <br>
          <p>Learn More</p>

        </div>
      </div>
      <div class="column2">
        <div class="card" id="card3">
          <img src="images/card-attachments.png" alt="Attachments">
          <br>
          <hr>
          <h2>Attachments</h2>
          <br>
          <p>Learn More</p>

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

我已经尝试了堆栈上的几乎所有内容，但我只是不知道该去哪里，如果您想要完整的CSS文件，我将不胜感激，我可以将其粘贴到这里，或者引用我的文件中的任何其他内容，我可以包括我只是有一种感觉，它与@media 查询本身有关。

html css responsive-design media-queries
1个回答
0
投票

我唯一能看到的是，您必须确保每个媒体查询中定义的样式不会相互冲突，因为范围重叠（例如，宽度为 614px 的设备将与第二和第三媒体查询）。尝试在第二个中更改为 615px。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.