반응 형 웹 디자인 - 미디어 쿼리 

미디어 쿼리 란 무엇입니까?

미디어 쿼리는 CSS3에서 소개 된 CSS 기술입니다.

@media특정 조건이 true 인 경우에만 규칙을 사용하여 CSS 속성 블록을 포함합니다.

예

브라우저 창이 500px보다 작 으면 배경색이 lightblue로 변경됩니다.

@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%;

    }

}