[반응형] Break Point (화면에 대한 분기점)

작성시 높은 순서대로 작성

• 낮은 해상도의 PC, 태블릿 가로 : ~1024px
• 테블릿 가로 : 768px ~ 1023px
• 모바일 가로, 태블릿 : 480px ~ 767px
• 모바일 : ~ 480px

 

 /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
 @media all and (min-width:768px) and (max-width:1023px) { ... }


 /* 테블릿 세로 (해상도 768px ~ 1023px)*/
 @media all and (min-width:768px) and (max-width:1023px) { ... }


 /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
 @media all and (min-width:480px) and (max-width:767px) { ... }


 /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
 @media all and (max-width:479px) { ... }