다양한 미디어 유형이나 장치에 따라, 서로 다른 스타일 규칙을 적용
@media 미디어타입 and (미디어특성) {
CSS코드
}
@media screen and (max-width: 1200px) {
body {
color: red;
}
}
미디어타입 (기본 값 : all)
all : 모든 미디어 타입에 적용
screen : 컴퓨터 화면, 테블렛, 스마트폰 등
print : 인쇄 전용
미디어특성
width : 뷰포트 가로 너비
max-width : 뷰포트 최대 가로 너비(이하)
min-width : 뷰포트 최소 가로 너비(이상)
height : 뷰포트 세로 너비
max-height : 뷰포트 최대 세로 너비(이하)
min-height : 뷰포트 최소 세로 너비(이상)
orientation : 뷰포트 방향(portrait, landscape)
기타 ...