미디어쿼리 기본 문법
@media [only 또는 not] [미디어 유형] [and 또는 ,콤마] (조건문){실행문}
미디어 유형
all : 모든 장치
print : 인쇄 장치
screen : 컴퓨터 화면 장치 또는 스마트 기기의 화면
tv : 영상과 음성이 동시에 출력되는 장치
projection : 프로젝터 장치
handheld : 손에 들고다니는 소형장치
speech : 음성 출력 장치
aural : 음성 합성 장치( 화면을 읽어 소리로 출력해 주는 장치)
embossed : 점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty : 디스플레이 기능이 제한된 장치
braille : 점자 표시 장치
조건문
width : 웹 페이지의 가로 너빗값
height : 웹 페이지의 세로 높잇값
device-width: 기기의 가로 너빗값
device-height: 기기의 세로 높이값
orientation : 기기의 화면 방향
aspect-ratio : 화면 비율
device-aspect-ratio : 단말기의 화면 비율
color : 기기의 비트 수
color-index : 기기의 색상 수
monochrome : 기기가 흑백일 때 픽셀당 비트 수
resolution : 기기의 해상도
scan : tv의 스캔 방식
grid : 기기의 그리드/비트맵
실행문
CSS 코드
미디어 쿼리 사용시 주의 사항
띄어쓰기 주의하기
and구문 사용할때 공백을 꼭 한 칸 띄워준다.
접두사인 min/max 사용시 작성 순서 주의하기
min 사용할때는 반드시 크기가 작은 순서대로 작성
ex)
@media all and (min-width:320px){실행문} @media all and (min-width:768px){실행문} @media all and (min-width:1024px){실행문}
max 사용할때는 반드시 크기가 큰 순서대로 작성