CSS 미디어 쿼리 디바이스별 해상도 분기점

기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width: 화면의 넓이를 디바이스의 넓이로 지정
initial-scale=1: 초기 화면 배율

 

 

4개의 반응형 분기점

 

• 낮은 해상도의 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) {
  ...
}

3개의 반응형 분기점

 

• PC : 1024px ~
• 테블릿 가로, 태블릿 세로 : 768px ~ 1023px
• 모바일 가로, 모바일 세로 : ~ 768px

/* PC (해상도 1024px)*/ 
@media all and (min-width:1024px) {
  ...
} 

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

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