Question

我一直在使用Safari的响应问题。我预计随着屏幕变小，三列会堆叠成两列，但行似乎保持相同的大小。

以下是有问题的代码

HTML：

<section id="partners" align="center">
         <div class="row">
              <div class="small-4">
                  <div class="partner-logo" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                     <img src="wp-content/uploads/2016/12/storks.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                  </div><!--END .partner-logo -->
                  <div class="partner-name">
                      <h4>Save The Storks</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
               </div><!-- END .small-4 -->                              

          <div class="small-4">
               <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                     <img src="wp-content/uploads/2016/12/cor.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                </div><!--END .partner-logo -->
                <div class="partner-name">
                     <h4>City of Refuge</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                </div><!--END .partner-name-->
          </div><!-- END .small-4 -->                               

          <div class="small-4">
               <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                  <img src="wp-content/uploads/2016/12/alliance.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
               </div><!--END .partner-logo -->
                <div class="partner-name">
                   <h4>Alliance Defending Freedom</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
           </div><!-- END .small-4 -->                              

           <div class="small-4">
                <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                    <img src="wp-content/uploads/2016/12/drjames.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                  </div><!--END .partner-logo -->
                  <div class="partner-name">
                     <h4>Family Talk with Dr. James Dobson</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
             </div><!-- END .small-4 -->                            

          <div class="small-4">
                  <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                     <img src="wp-content/uploads/2016/12/cgc.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                  </div><!--END .partner-logo -->
                  <div class="partner-name">
                      <h4>Church of God in Christ</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
            </div> <!-- END .small-4 -->
        </div> <!-- END .row -->
 </section><!-- END #partners -->

CSS

.row {
max-width: 65.21739rem;
margin-left: auto;
margin-right: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

 :after, :before {
box-sizing: inherit
}

html {
font-size: 115%;
box-sizing: border-box
}

当我在html元素中注释掉box-sizing属性时，我似乎堆叠了两列，但没有合适的边距。

Chrome和FireFox上的页面显示正常。我需要做哪些修改才能在Safari上正确显示？

添加信息----

我尝试将min-width和max-width更改为其他帖子中建议的flex，但是虽然修复了包装问题，但flexbox仍停止调整大小。

以下是我使用的媒体查询：

@media (min-width: 300px) {
    .container {
        width: 280px;
        margin: 0 auto;
    }
    #partners .partner-logo img {
        margin-top: 30px;
        width: 80%;
        height:auto;
    }
    #partners {
        text-align: center;
        padding: 80px 0px 80px 5px;
    }

    .partner-container {
        margin: 0 auto;
        min-width: 310px;
        float: right;
    } 

    .feature-image .hero-layer h1 {
        padding: 80px 0 80px 0;
    }

    #partners-intro .row {
        padding: 30px 0;
        position: relative;
    }

    #partners-intro h3 {
        font-size: 1rem;
    }

    #partners .row {
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    #partners .small-4 {
        min-width: 98.5%;

    }


}



@media (min-width: 320px) {
    #partners .small-4 {
        min-width: 98.5%;

    }

}

@media (min-width: 480px) {
    .container {
        width: 400px;
        margin: 0 auto;
    }
    #partners .partner-logo img {
        margin-top: 30px;
        width: 80%;
        height:auto;
    }
    #partners {

        padding: 80px 0px 80px 5px;
    }

    #partners-intro .row {
        padding: 50px 0;
    }

    #partners-intro h3 {
        font-size: 1.44478rem;
    }

}

@media (min-width: 600px) {
    #partners .small-4 {
        min-width: 49.5%;
    }

}

@media (min-width: 768px) {
    .container {
        width: 700px;
        margin: 0 auto;
    }
    #partners .partner-logo img {
        margin-top: 30px;
        width: 80%;
        height:auto;
    }
    #partners {

        padding: 80px 0px 80px 5px;
    }
    .partner-box {
        margin: 0;
    }

    .feature-image .hero-layer h1 {
        padding: 100px 0 100px 0;

    }

    #partners-intro .row {
        padding: 60px 0;
    }

    #partners-intro h3 {
        font-size: 1.58478rem;
    }


    #partners .small-4 {
        min-width: 49.5%;

    }

}
@media (min-width: 992px) {
    .container {
        width: 895px;
        margin: 0 auto;
    }

    #partners .small-4 {
        min-width: 32.5%;

    }

}
@media (min-width: 1200px) {
    .container {
        width: 1101px;
        margin: 0 auto;
    }

    .feature-image .hero-layer h1 {
        padding: 180px 0 180px 0;

    }

    #partners-intro .row {
        padding: 80px 0;
    }

    #partners-intro h3 {
        font-size: 1.68478rem;
    }
}

Answer 1

答案是我没有在我的HTML代码中包含.column类。我不熟悉这个框架，我省略了这个类。

将这个类包含在所有带有弹性框的div中后，我用其flexbox等效的替换了媒体查询中的所有min和max为@NathanielFlick推荐

Safari响应式大小调整属性冲突

1 个答案: