W3.CSS-반응 형 디자인

W3.CSS에는 반응 형 디자인을 만들기위한 몇 가지 특수 클래스가 있습니다.

Sr. No. 클래스 이름 및 설명
1

w3-half

1/2 점유 할 수있는 용기 설정 중간 또는 큰 스크린 장치에 창을. 화면이 601 픽셀보다 작은 경우 컨테이너 크기를 100 %로 조정합니다.

2

w3-third

1/3 점유 할 수있는 용기 설정 번째 중간 또는 큰 스크린 장치에 창을. 화면이 601 픽셀보다 작은 경우 컨테이너 크기를 100 %로 조정합니다.

w3-quarter

1/4 점유 용기 설정 번째 중간 또는 대형 스크린 장치에 창을. 화면이 601 픽셀보다 작은 경우 컨테이너 크기를 100 %로 조정합니다.

4

w3-col

12 기둥 그리드의 기둥을 지정합니다.

5

w3-row

반응 형 클래스에 사용할 패딩없는 컨테이너를 지정합니다. 이 클래스는 반응 형 클래스가 완전히 반응하려면 필수입니다.

w3css_responsive_design.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

결과

결과를 확인하십시오.