반응 형 웹 디자인 - 미디어 쿼리
: 미디어 (매체) CSS3에 대한 쿼리 도입 CSS3의 @media 쿼리를 .
당신은 다른 매체 유형에 대해 서로 다른 스타일을 정의 할 수 있습니다, @media 쿼리를 사용합니다.
예
브라우저 창은 500 픽셀보다 작 으면, 백그라운드 라이트 블루로 변경된다 :
body {
background-color: lightblue;
}
}
»시도
중단 점을 추가
우리가 웹 페이지를 만들기 위해 행과 열을 사용하여 이전 튜토리얼에서, 반응이지만, 친절 쇼 작은 화면이 아닌.
미디어 쿼리는 우리가이 문제를 해결 할 수 있습니다. 우리는 초안 디자인의 중간에 중단 점을 추가 할 수 있습니다, 다른 브레이크 포인트는 다른 효과를 가지고있다.
바탕 화면
모바일 장치
중단 점을 추가 768px 미디어 쿼리를 사용합니다 :
예
화면 (브라우저 윈도우) 768px 미만인 경우, 각 컬럼의 폭은 100 %이다 :
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
»시도
이동 통신 단말기 디자인에 대한 우선 순위
우선 동화상 단부 데스크톱 및 이동 단말의 디자인에 우선 순위를 부여하기위한 다른 장치를 의미한다.
이것은 우리가 CSS 일부를 변경할 필요가 있다는 것을 의미한다.
우리는 화면이 768px보다 넓은 경우 동일한 스타일로 수정해야 작은 스타일의 변화 768px보다 화면. 다음 모바일 엔드 우선 순위의 예 :
[클래스 * = "col-"] {
폭 : 100 %;
}
@media 만 화면 (최소 폭 : 768px) {
/ * 데스크탑의 경우 : * /
.COL-1 {폭 : 8.33 % ;}
.COL-2 {폭 : 16.66 % ;}
.COL-3 {폭 : 25 % ;}
.COL-4 {폭 : 33.33 % ;}
.COL-5 {폭 : 41.66 % ;}
.COL -6- {폭 : 50 % }
.COL-7 {폭 : 58.33 % ;}
.COL-8 {폭 : 66.66 % ;}
.COL-9 {폭 : 75 % ;}
.COL-10 {폭 : 83.33 % ;}
.COL-11 {폭 : 91.66 % ;}
.COL-12 {폭 : 100 % ;}
}
기타 중단
당신은 그들의 필요에 따라 중단 점을 추가 할 수 있습니다.
우리는 또한 태블릿과 휴대 전화 장치는 브레이크 포인트를 설정할 수 있습니다.
바탕 화면
태블릿
모바일 장치
600PX 스크린 미디어 쿼리를 추가, 새로운 스타일을 설정 (하지만 화면보다보다 큰 600PX 768px입니다) 때 :
예
이 클래스 스타일은 동일하지만 참고 다른 이름 (col- 및 COL-M-) :
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
»시도
위의 코드는 훨씬 더 보이지만, 그는 다른 스타일의 화면 크기에 따라 자동으로 설정 될 수있다, 그래서 그것은 여전히 매우 필요하다.
HTML 예
데스크톱의 경우 :
첫 번째와 세 번째 부분은 세 걸친. 중간 부분 도메인 간 6.
태블릿 기기의 경우 :
첫 번째 크로스 도메인 3, 9 걸쳐 두 번째 섹션, 크로스 도메인 (12)의 세 번째 부분 :
<사업부 클래스 = "COL-3 COL-m-3"> ... </ DIV>
<사업부 클래스 = "COL-6 COL-m-9"> ... </ DIV>
<사업부 클래스 = "COL-3 COL-M-12"> ... </ DIV>
</ DIV>
방향 : 가로 화면 / 세로 화면
CSS 미디어 쿼리와 결합, 당신은 다른 장치의 방향 (가로 풍경, 초상 등) 레이아웃에 적응 만들 수 있습니다.
구문 :
orientation：portrait | landscape
- 세로 : 페이지 높이의 가시 영역에서의 출력 장치는 폭 이상인 지정할
- 풍경 : 간 세로 환경의 값이 풍경이다