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>결과
결과를 확인하십시오.