반응형을 위한 미디어쿼리 정보
반응형 반응형을 위한 미디어쿼리본문
미디어 쿼리 규칙
@media only 매체유형 and (조건문) {실행문}
매체유형>
| all | 모든 매체에 사용함. |
| 프린터 기기에 사용함. | |
| screen | 컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함. |
| speech | 웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함. |
미디어쿼리 속성>
| width | 화면의 너비 |
| height | 화면의 높이 |
| device-width | 매체 화면의 너비 |
| device-height | 매체 화면의 높이 |
| devie-aspect-ratio | 매체 화면의 비율 |
| orientation | 매체 화면의 방향 |
| color | 매체의 색상 비트 수 |
| color-index | 매체에서 표현 가능한 색상의 개수 |
| monochrome | 흑백 매체에서의 픽셀당 비트 수 |
| resolution | 매체의 해상도 |
예시)
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 비율 이하면 실행
추천
2
2
댓글 2개
좋은 정보 감사합니다.
좋은 정보 감사합니다.