미디어쿼리관련

Media query관련

· 조건문이 될 수 있는 특징 

①width / height

@media all and (min-width:768px) and (max-width:1024px) { … }

 // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행

@media all and (width:768px), (width:1024px) { … }

 // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행

@media not all and (min-width:768px) and (max-width:1024px) { … } 

// 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행

②device-width / device-height

@media all and (device-width:320px) and (device-height:480px) { … }

 // 스크린 너비가 320px ‘그리고’ 높이가 480px 이면 실행

@media all and (min-device-width:320px) and (min-device-height:480px) { … } 

// 스크린 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행

③orientation : 뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.

@media all and (orientation:portrait) { … }

 // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행

@media all and (orientation:landscape) { … }

 // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

---

(참고) 

http://naradesign.net/wp/2012/05/30/1823/

http://ccuram.tistory.com/30