css 미디어 쿼리 디바이스별 width

Meta viewport 추가

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

 

 

4개의 반응형 

 

낮은 해상도의 pc , 태블릿 가로 : ~1024px

태블릿 가로 : 768px ~ 1023px

모바일 가로, 태블릿 : 480px ~767px

모바일 : ~ 460px

 

/* 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) {
  ...
}
출처: https://hohoya33.tistory.com/127 [개발 메모장:티스토리]

 

 

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) {
  ...
}
출처: https://hohoya33.tistory.com/127 [개발 메모장:티스토리]