윈도우 크기가 축소되었을 때 CSS가 발생했습니다

Question

이것은 내 HTML 코드입니다. 하나의 div 클래스를 표시하려면 "상자 1"을 선택하고 창 크기가 너무 커서 여러 상자를 넣을 수 없으며 조정할 수 있습니다. 창 화면 크기를 조정하면서 자체가 .. 누군가가 .. 사전에 .. 나에게 감사를 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 : 그 자바 스크립트를 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/