窗口大小減小時的css問題

Question

這是我的html代碼，當窗口大小太小而不適合多個框並且它們可以調整時，我想要一個接一個地顯示單個div class =「box1」自己而調整窗口大小的屏幕。可有人請我提供的CSS代碼..在此先感謝..

<section id="one" class="wrapper style1"> 
    <div class="container1"> 
     <div class="row1 no-collapse-1">   
      <section class="4u"> 
       <div class="box1"> 
        <h3> Skin Care </h3> 
         <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a> 
        <br> 
        <a href="#" class="button">Explore</a> 
       </div> 
      </section> 

      <section class="4u"> 
       <div class="box1"> 
        <h3> Hair Care </h3> 
        <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a> 
        <br> 
        <a href="#" class="button">Explore</a> 
       </div> 
      </section> 

      <section class="4u"> 
       <div class="box1"> 
        <h3> Body Care </h3> 
        <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a> 
        <br> 
        <a href="#" class="button">Explore</a> 
       </div> 
      </section> 

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

CSS：

.container1 { 
     margin-left: auto; 
     margin-right: auto; 

     /* width: (containers) */ 
     width: 1200px; 
    } 

    /* Modifiers */ 

     .container1.small { 
      /* width: (containers) * 0.75; */ 
      width: 900px; 
     } 

     .container1.big { 
      width: 100%; 

      /* max-width: (containers) * 1.25; */ 
      max-width: 1500px; 

      /* min-width: (containers); */ 
      min-width: 1200px; 
     } 

    /* Grid */ 

    .\31 2u { width: 100% } 
    .\31 1u { width: 91.6666666667% } 
    .\31 0u { width: 83.3333333333% } 
    .\39 u { width: 75% } 
    .\38 u { width: 66.6666666667% } 
    .\37 u { width: 58.3333333333% } 
    .\36 u { width: 50% } 
    .\35 u { width: 41.6666666667% } 
    .\34 u { width: 33.3333333333% } 
    .\33 u { width: 25% } 
    .\32 u { width: 16.6666666667% } 
    .\31 u { width: 8.3333333333% } 
    .\-11u { margin-left: 91.6666666667% } 
    .\-10u { margin-left: 83.3333333333% } 
    .\-9u { margin-left: 75% } 
    .\-8u { margin-left: 66.6666666667% } 
    .\-7u { margin-left: 58.3333333333% } 
    .\-6u { margin-left: 50% } 
    .\-5u { margin-left: 41.6666666667% } 
    .\-4u { margin-left: 33.3333333333% } 
    .\-3u { margin-left: 25% } 
    .\-2u { margin-left: 16.6666666667% } 
    .\-1u { margin-left: 8.3333333333% } 


@media screen and (max-width: 1680px) { 

     .container1.\31 25\25 { 
      width: 100%; 
      max-width: 100em; 
      min-width: 80em; 
     } 

     .container1.\37 5\25 { 
      width: 60em; 
     } 

     .container1.\35 0\25 { 
      width: 40em; 
     } 

     .container1.\32 5\25 { 
      width: 20em; 
     } 

     .container1 { 
      width: 80em; 
     } 

    } 

    @media screen and (max-width: 1280px) { 

     .container1.\31 25\25 { 
      width: 100%; 
      max-width: 81.25em; 
      min-width: 65em; 
     } 

     .container1.\37 5\25 { 
      width: 48.75em; 
     } 

     .container.\35 0\25 { 
      width: 32.5em; 
     } 

     .container1.\32 5\25 { 
      width: 16.25em; 
     } 

     .container1 { 
      width: 65em; 
     } 

    } 

    @media screen and (max-width: 980px) { 

     .container1.\31 25\25 { 
      width: 100%; 
      max-width: 112.5%; 
      min-width: 90%; 
     } 

     .container1.\37 5\25 { 
      width: 67.5%; 
     } 

     .container1.\35 0\25 { 
      width: 45%; 
     } 

     .container1.\32 5\25 { 
      width: 22.5%; 
     } 

     .container1 { 
      width: 90% !important; 
     } 

    } 

    @media screen and (max-width: 736px) { 

     .container1.\31 25\25 { 
      width: 100%; 
      max-width: 112.5%; 
      min-width: 90%; 
     } 

     .container1.\37 5\25 { 
      width: 67.5%; 
     } 

     .container1.\35 0\25 { 
      width: 45%; 
     } 

     .container1.\32 5\25 { 
      width: 22.5%; 
     } 

     .container1 { 
      width: 90% !important; 
     } 

    } 

    @media screen and (max-width: 480px) { 

     .container1.\31 25\25 { 
      width: 100%; 
      max-width: 112.5%; 
      min-width: 90%; 
     } 

     .container1.\37 5\25 { 
      width: 67.5%; 
     } 

     .container1.\35 0\25 { 
      width: 45%; 
     } 

     .container1.\32 5\25 { 
      width: 22.5%; 
     } 

     .container1 { 
      width: 90% !important; 
     } 

    } 


    .box1 { 
     padding: 3em 2em; 
     background: #FFF; 
     text-align: center; 
     border-radius: 0px 0px 6px 6px; 
    } 

Answer 1

我認爲，需要2點不同的CSS聲明，因此JavaScript的有條件地應用它。

注意窗口的寬度並適當更改容器的CSS。我建議使用flexbox並更改flex-direction，以便它從水平佈局到垂直佈局。

這是使用jQuery：

<div id="container"> 
    <div>asdf</div> 
    <div>asfd</div> 
    <div>asdf</div> 
    <div>asdf</div> 
</div> 

#container { 
    display: flex; 
} 

#container div { 
    padding: 10px; 
    background: grey; 
} 

$(window).resize(function() { 
    if ($(window).width() > 200) { 
    $("#container").css({ 
     "flex-direction": "row", 
     "width": "200px" 
    }); 
    } else { 
    $("#container").css({ 
     "flex-direction": "column", 
     "width": "100%" 
    }); 
    } 
}); 

https://jsfiddle.net/JackHasaKeyboard/9at67dhk/