mediaqueri

미디어쿼리 구문

@media [ only/not ] 미디어유형 [ and (조건) ] [ and (조건) ]

미디어유형

all - 모든 미디어유형
screen - 스크린(스마트폰 포함)
print - 인쇄장치
tv - 음성과 영상이 동시 출력되는 티비
aural - 음성합성장치(화면낭독기)
braille - 점자표시장치
handheld - 패드처럼 손에 들고다니는 장치
projection - 프로젝터
tty - 디스플레이 기능이 제한된 장치(픽셀단위를 사용불가)
embossed - 점자프린터

연산자

and - 앞의 소스처럼 조건을 계속 추가할 수 있다
only - 미디어쿼리를 지원하는 웹브라우저에서만 조건을 인식함
not - 다음에 지정하는 미디어 유형을 제외하고 적용
, - 동일한 유형의 스타일을 사용할 미디어 유형과 조건이 있다면 쉼표를 이용해 추가

미디어쿼리의 조건

웹문서의 가로와 세로

width, height : 웹문서의 가로 너비와 세로 높이
min-width, min-height : 최소너비, 최소 높이
max-width, max-height : 최대너비, 최대 높이

웹문서의 가로 너비와 세로 높이에 따른 미디어쿼리

단말기의 가로와 세로

device-width, device-height : 단말기의 가로 너비와 세로 높이
min-device-width, min-device-height : 단말기의최소너비, 최소 높이
max-device-width, max-device-height : 단말기의 최대너비, 최대 높이

단말기 가로가 320이상이고 높이가 480이상일때 미디어쿼리
@media all and (min-device-width:320px) and (min-device-height:480px) {
...
}

화면 회전(방향)

orientation:portrait - 단말기의 세로방향
orientation:landscape - 단말기의 가로방향

화면이 가로방향일 때와 세로방향일 때의 미디어쿼리
@media screen and (orietation:landscape) {
...
}
@media screen and (orietation:portrait) {
...
}

화면 비율, 단말기의 물리적 화면 비율

aspect-ratio : 화면비율(width값/height값)
min-aspect-ratio : 최소화면비율
max-aspect-ratio : 최대화면비율

device-aspect-ratio : 단말기의 화면비율(width값/height값)
min-device-aspect-ratio : 단말기의 최소화면비율
max-device-aspect-ratio : 단말기의 최대화면비율

화면비율이 16:9일 때와 그 이상일때, 그 이하일때로 나누어 실행할 미디어쿼리
@media all and (device-aspect-ratio:16/9) {
...
}
@media all and (min-device-aspect-ratio:16/9) {
...
}
@media all and (max-device-aspect-ratio:16/9) {
...
}

색상당 비트수

color: 비트수
min-color: 최소 비트수
max-color: 최대 비트수

컬러를 지원하면 실행
@media all and (color){
...
}
컬러를 지원하지 않으면 실행
@media all and (color:0){
...
}
8비트 색상이라면 실행
@media all and (color:3) {
...
}
8비트 이하 색상이라면 실행
@media all and (min-color:3) {
...
}