반응형 미디어쿼리

항상 모바일 우선 디자인
모바일 우선은 데스크톱이나 기타 장치를 설계하기 전에 모바일 용으로 설계하는 것을 의미합니다 (이렇게하면 더 작은 장치에서 페이지를 더 빨리 표시 할 수 있습니다).

이는 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 예제
데스크톱의 경우 :

첫 번째와 세 번째 섹션은 모두 각각 세 개의 열을 포함합니다. 중간 섹션은 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;
    }
}