[css] 반응형 작성법 @media

768px 미만은 모바일 기기, 
768px ~ 1024px 사이는 타블렛,
 1024px 이상은 데스크탑 기기로 구분

# 해상도 size 변경 분기점 설정

데스크탑(1024px~)
타블렛(768px ~ 1023px)
모바일(360px-767px)

<예시>

1

@media screen and (max-width:680px) {
}

 

2.

 @media (min-width: 360px) and (max-width: 767px){
  }

 

 

3
@media all and (min-width:1024px) {
} 

@media all and (min-width:768px) and (max-width:1023px) {
}

 

 

---

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

 

 

출처: https://hohoya33.tistory.com/127

 

 

▼ 내가 작성한 종합 코드 예시 (아래 max-width:767px이면 아래 사이즈도 다 적용되니까) /이렇게 작성 후 필요한 부분들도 추가로 작성함

@media all and (min-width:768px) and (max-width:1023px) {
} 

@media all and (max-width:767px){
}