ウィンドウサイズが縮小されたときのCSSの問題

Question

これは私のHTMLコードです。ウィンドウサイズが複数のボックスに収まるには小さすぎると調整することもできますが、divクラス= "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：私はJavaScriptを2つの異なる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

それを条件付きで適用する。

ウィンドウの幅を監視し、コンテナのCSSを適切に変更します。私はフレックスボックスを使用して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/