반응형을 위한 미디어쿼리

미디어 쿼리 규칙

@media only 매체유형 and (조건문) {실행문}

매체유형>

미디어쿼리 속성>

예시)

body { background-color: white; } @media screen and (min-width: 640px) and (max-width:1280px) { body { background-color: pink; } }

가로값이 640px 이상 1280px 이하일 경우 핑크색 배경으로 바뀌는걸 볼 수 있다.

비율로 주는법)

//세로 모드, 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:portrait){
   body{background:yellow}
}

//가로 모드, 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
@media all and (orientation:landscape){
   body{background:yellow}
}

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행
@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행
@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행