미디어쿼리( MediaQuery ) 설정

미디어쿼리 (MediaQuery )설정

 

▶ PC :  1280px 이상
▶ 노트북 & 태블릿 가로 : 1024px ~ 1279px

▶ 태블릿 가로 : 768px ~ 1023px
▶ 모바일 가로 & 태블릿 세로 : 480px ~ 767px
▶ 모바일 : ~479px

 

일반 데스크탑	1280px 이상
노트북 & 태블릿 가로	1024px ~ 1279px	@media (max-width:1279px)
태블릿 가로	768px ~ 1023px	@media (max-width:1023px)
모바일 가로 & 태블릿 세로	480px ~ 767px	@media (max-width:767px)
모바일	320px~479px	@media (max-width:479px)
작은 모바일	320px 이하	@media (max-width:320px)

/*  ####### 노트북 & 태블릿 가로 (해상도 1024px ~ 1279px)   #######  */ 
@media all and  (max-width:1279px) { 
  스타일 입력
} 

/* ####### 태블릿 가로 (해상도 768px ~ 1023px)  #######  */ 
@media all and  (max-width:1023px) { 
  스타일 입력
} 

/* #######   모바일 가로 & 태블릿 세로 (해상도 480px ~ 767px)  ####### */ 
@media all and  (max-width:767px) {
  스타일 입력
} 

/*  ####### 모바일 세로 (해상도 320px ~ 479px)  ####### */ 
@media all and (max-width:479px) {
  스타일 입력
}

 

/*  ####### 모바일 세로 (해상도  320px 이하 )  ####### */ 
@media all and (max-width: 320px) {
  스타일 입력
}