응답 클래스
W3.CSS는 레이아웃을 처리 할 수있는 응답, 모바일 최초의 그리드 시스템을 포함한다 :
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50 픽셀
휴식
1/4
휴식
100 픽셀
45 픽셀
휴식
W3.CSS의 그리드 시스템에 응답하며, 열이 화면의 크기에 따라 자동으로 재 배열된다 :
| 수업 | 기술 |
|---|---|
| W3 반 | (중형 및 대형 화면에) 윈도우의 1/2을 차지 |
| W3 - 세번째 | (중형 및 대형 화면에) 윈도우의 1/3을 차지 |
| W3-twothird | (중형 및 대형 화면에) 윈도우의 2/3을 차지 |
| W3 분기 | (중형 및 대형 화면에) 윈도우의 1/4을 차지 |
| W3-threequarter | (중형 및 대형 화면에) 윈도우의 3/4을 차지 |
| W3 받침대 | 행의 나머지를 정의 |
| W3-COL | (나중에 장 이상) 12 열 반응 유체 그리드의 열을 정의 |
응답 행
응답 클래스는 완전히 반응 할 수있는 W3 행 내부에 배치해야합니다.
| 수업 | 기술 |
|---|---|
| W3 행 | 응답 클래스의 패딩없는 컨테이너를 정의합니다. |
| W3 행 패딩 | 응답 클래스의 패딩 컨테이너를 정의합니다. |
W3 반 클래스
W3 반 계급의 폭은 부모 요소 (스타일 = "50 % 폭")의 1/2이다.
작은 * 화면에 100 %로 변경됩니다.
W3 반
W3 반
예
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> »그에게 자신을보십시오 W3-세 번째 클래스
W3-번째 클래스의 폭은 부모 요소 (스타일 = "33.33 % 폭")의 1/3이다.
작은 * 화면에 100 %로 변경됩니다.
W3 - 세번째
W3 - 세번째
W3 - 세번째
예 W3 3 분의 1을 사용하여
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> »그에게 자신을보십시오 W3-twothird 클래스
W3-twothird 계급의 폭은 부모 요소 (스타일 = "66.66 % 폭")의 2/3이다.
작은 * 화면에 100 %로 변경됩니다.
W3-twothird
W3 - 세번째
예 W3 3 분의 1을 사용하여
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> »그에게 자신을보십시오 W3 분기 클래스
W3 분기 계급의 폭은 부모 요소 (스타일 = "25 % 폭")의 1/4이다.
작은 * 화면에 100 %로 변경됩니다.
W3 분기
W3 분기
W3 분기
W3 분기
예 W3 분기를 사용하여
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> »그에게 자신을보십시오 W3-threequarter 클래스
W3-threequarter 계급의 폭은 부모 요소 (스타일 = "75 % 폭")의 3/4이다.
작은 * 화면에 100 %로 변경됩니다.
W3 분기
W3 분기
예 W3-threequarter를 사용하여
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> »그에게 자신을보십시오 조합
W3 분기
W3 반
W3 분기
W3 분기
W3 분기
W3 반
W3 반
W3 분기
W3 분기
중첩 행
예 : W3 반 내부 W3 반
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> »그에게 자신을보십시오 나머지를 사용하여 열
나는 150 픽셀 오전
나는 나머지입니다
예 W3 받침대를 사용하여
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> »그에게 자신을보십시오 백분율을 사용하여 열
20 %
60 %
20 %
퍼센트를 사용하여 실시 예
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> »그에게 자신을보십시오 W3 콘텐츠 클래스
W3 콘텐츠 클래스는 고정 된 크기를 중심으로 콘텐츠에 대한 컨테이너를 정의한다 :
W3 행 및 W3 행 패딩의 차이
W3 행 패딩 클래스는 각 열에 8px 좌우 패딩을 추가하면서 W3 행 클래스는 패딩없는 용기를 정의
W3 행 :
W3 행 패딩 :
예
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> »그에게 자신을보십시오 (12) 열 반응 유체 격자
W3.CSS 또한 고급 12 열 반응 유체 그리드를 지원합니다.
효과를 볼 수있는 페이지의 크기를 조정!
이 부분은 큰 화면에 12 중간 화면에 작은 화면, 4 열 및 3을 차지합니다.
이 부분은 큰 화면에 12 중간 화면에 작은 화면, 8 열, 9를 차지합니다.
당신은 나중에 장에서 유체 그리드에 대한 자세한 내용을 배울 것입니다.
* 화면 해상도
W3.CSS에 내장 된 응답은 화면 DP 크기를 사용한다.
W3.CSS는 375 X 667 픽셀의 작은 화면과 750 X 1334 픽셀의 해상도로 아이폰 6를 처리합니다.
작은 스크린은 601 픽셀 DP보다 작은, 중간 화면 미만 993 픽셀 DP입니다.
다음은 전형적인 장치 해상도의 목록이며, DP 크기를보고 :
아이폰 4
해결
640 × 960
DP
320 × 480
아이폰 5
해결
X 1136 (640)
DP
320 X 528
아이폰 6
해결
X 1334 (750)
DP
375 X 667
아이폰 6S
해결
X 1920 1080
DP
414 X 736
갤럭시 S6
해결
X 2560 1440
DP
360 × 640
주 4
해결
X 2560 1440
DP
400 X 853
넥서스 6
해결
X 2560 1440
DP
411 X 731
아이 패드 미니
해결
X 1024 768
DP
X 1024 768
아이 패드
해결
X 2048 1536
DP
X 1024 (728)
일반적인 노트북
해결
1366 X 768
DP
1366 X 768
일반적인 데스크톱
해결
1920 × 1080
DP
1920 × 1080