미디어쿼리 샘플

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) {
  ...
}

 

 

 

 

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) {
  ...
}