반응형 웹 디자인의 핵심
: 뷰포트의 크기에 따라 서로 다른 레이아웃 생성 가능

[예시코드]
@media (max - width: 1200px){ p{ font-size: 2rem; } }
*min- or max- : 접두사
*width: 화면 너비(=사용자 해상도, 뷰포트)

[각각 장치마다 많이 사용하는 해상도]

세로(partrait)

1. 스마트폰(480px)
2. tablet(768px)

가로(Landscape)

1. notebook(1024px)
2. desktop computer(1200px)
3. TV(1200px초과)