출력 장치의 여러 특징을 분기 처리하여 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현하는 명세.
@media only all and (조건문) {실행문}
- @media : 미디어 쿼리가 시작됨을 선언.
- only : 미디어 쿼리를 지원하는 사용자만 쿼리 구문을 해석(default only)
- 지원 브라우저 : ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+
- all : 미디어 쿼리를 해석해야 할 대상 미디어를 선언.
- all/ screen/ print 등이 있음.
- and 또는 or(,)
- (조건문)
- orientation : 가로모드/세로모드 판별 (orientation:portrait), (orientation:landscape)
- width / height : (min-width:768px), (max-height:500px)
- {실행문} : CSS 코드를 작성
Reference
http://aboooks.tistory.com/365