미디어 쿼리는 무엇인가?
미디어 쿼리는 CSS3에 도입 된 CSS 기술이다.
그것은 사용 @media 특정 조건이 true 인 경우에만 CSS 속성의 블록을 포함하는 규칙을.
예
브라우저 창은 500 픽셀보다 작 으면, 배경색은 연한 변경합니다
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
»그것을 자신을 시도 중단 점 추가
이번 튜토리얼에서는 행 및 열이 웹 페이지를 만들고, 이는 반응 이었지만, 작은 화면에 잘 보이지 않았다.
미디어 쿼리는 도움이 될 수 있습니다. 우리는 디자인의 특정 부분이 중단 점의 각 측면에서 다르게 작동합니다 중단 점을 추가 할 수 있습니다.
바탕 화면
전화
768px에 중단 점을 추가하는 미디어 쿼리를 사용 :
예
화면 (브라우저 창) 768px보다 작아지는 경우, 각 열은 100 %의 폭을 가져야한다 :
/* 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
»그것을 자신을 시도 항상 모바일 첫째을위한 디자인
모바일 우선 (이 페이지 표시 속도 작은 장치에 대한 것) 바탕 화면 또는 다른 장치에 대한 설계하기 전에 모바일 디자인을 의미합니다.
이것은 우리가 우리의 CSS에 약간 수정을해야한다는 것을 의미합니다.
폭이 768px보다 큰 오면 대신 폭보다 작은 768px를 얻을 때 스타일을 변경, 우리는 디자인을 변경해야합니다. 이것은 우리의 디자인 모바일 첫째을 만들 것입니다 :
예
/* For mobile phones: */
[class*="col-"] {
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%;}
}
»그것을 자신을 시도 또 다른 브레이크 포인트
당신이 원하는만큼 중단 점을 추가 할 수 있습니다.
우리는 또한 태블릿과 휴대 전화 사이에 중단 점을 삽입합니다.
바탕 화면
태블릿
전화
우리는 하나 이상의 미디어 (600PX에서) 쿼리 및 600PX (그러나보다 작은 768px)보다 큰 장치에 대한 새로운 클래스 세트를 추가하여이 작업을 수행 :
예
클래스의 두 세트가 거의 동일하다는 것을 유의 유일한 차이점은 이름이다 ( col- 및 col-m- )
/* For mobile phones: */
[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의 기회를 제공합니다 :
HTML 예
데스크톱의 경우 :
첫번째와 세번째 섹션은 모두 3 열의 각 스팬한다. 중간 부분은 6 열을 걸쳐 것입니다.
정제의 경우 :
3 열에 걸쳐 것이다 첫번째 섹션은, 제 9에 걸쳐, 세번째 섹션은 먼저 두 부분 아래에 표시되며, 이는 컬럼 (12)에 걸쳐있는 것
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>방향 : 세로 / 가로
미디어 쿼리는 또한 브라우저의 방향에 따라 페이지의 레이아웃을 변경하는데 사용될 수있다.
당신은 브라우저 창 높이, 소위 "가로"방향보다 넓은 경우에만 적용됩니다 CSS 속성 세트를 가질 수 있습니다 :
예
방향이 가로 모드인지 웹 페이지는 연한 배경 갖
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} »그것을 자신을 시도