뷰포트와 스크린 크기

뷰포트는 브라우저 창에서 툴바와 탭등을 제외한 순수 콘텐츠 영역과 관련되어 있음

 - 미디어 쿼리에서는

   뷰포트의 경우 width, height

   @media screen and (max-width:360px);

 

스크린 크기는 디바이스의 실제 디스플레이 영역을 말함

 - 미디어 쿼리에서는

   스크린 크기는 device-width, device-height

   @media screen and (max-device-width : 400px);

 

orientation : 디바이스의 세로 가로 방향 여부