각종 미디어쿼리!

 

 

1. /* 스마트폰 (가로・세로) ----------- */
2. @media only screen

• and (min-device-width : 320px)
• and (max-device-width : 480px) {
• /* Styles */
• }
•  
• /* 스마트폰 (가로용) ----------- */
• @media only screen
• and (min-width : 321px) {
• /* Styles */
• }
•  
• /*스마트폰 (세로용) ----------- */
• @media only screen
• and (max-width : 320px) {
• /* Styles */
• }
•  
• /* iPads （가로・세로) ----------- */
• @media only screen
• and (min-device-width : 768px)
• and (max-device-width : 1024px) {
• /* Styles */
• }
•  
• /* iPads (가로용) ----------- */
• @media only screen
• and (min-device-width : 768px)
• and (max-device-width : 1024px)
• and (orientation : landscape) {
• /* Styles */
• }
•  
• /* iPads (세로용) ----------- */
• @media only screen
• and (min-device-width : 768px)
• and (max-device-width : 1024px)
• and (orientation : portrait) {
• /* Styles */
• }
•  
• /* 데스크톱 ----------- */
• @media only screen
• and (min-width : 1224px) {
• /* Styles */
• }
•  
• /* 큰 사이즈의 스크린 ----------- */
• @media only screen
• and (min-width : 1824px) {
• /* Styles */
• }
•  
• /* iPhone 4 ----------- */
• @media
• only screen and (-webkit-min-device-pixel-ratio : 1.5),
• only screen and (min-device-pixel-ratio : 1.5) {
• /* Styles */
• }
   

 

물론 보통은 와이드 1900px에 컨텐츠 1200px를 기준으로 잡고, 탭은 건너뛰고 모바일 640px를 기준으로 미디어쿼리는 두번 정도 하지만 (나는..........................완전반응형 하려면 미디어쿼리가 셀수가 없지만..8ㅅ8) 참고해 두어도 좋을듯!