【CSS】미디어 쿼리 치트 시트

사이트의 프론트엔드를 담당하는 한 축인 CSS. 이번에는 CSS미디어 쿼리 치트 시트를 정리해 봤습니다.

미디어 쿼리란?

표시된 화면 환경에 따라 적용할 스타일을 전환하는 기능입니다.

CSS

@media screen and (min-width: 560px) {
  /* 스타일 */
}

화면 크기

스마트폰

스마트폰 세로 - 320px ~ 480px
스마트폰 가로 - 480px ~ 812px

iPhone5 320px
iPhone6/7/8/SE 375px
iPhone6/7/8 Plus 414px
iPhoneX 375px
Pixel2 411px
Galaxy S5 360px

태블릿

태블릿 세로 - 768px ~ 1024px
태블릿 가로 - 1024px ~ 1366px

iPad 768px
Android 8인치 600px

PC

1024px ~

MacBook 13인치 1440px
MacBook 16인치 1792px

브레이크 포인트란?

여기서의 브레이크 포인트의 의미는, 미디어 쿼리의 기점이 되는 화면 사이즈 입니다.

스마트폰 세로 480px
스마트 폰 옆 600px
태블릿 세로 768px
태블릿 가로 1024px
PC 1200px

 

쓰기

〇〇 px 이상

CSS

@media screen and (min-width: 〇〇px) {
  /* 스타일 */
}

〇〇 px 이하

CSS

@media screen and (max-width: 〇〇px) {
  /* 스타일 */
}

 

〇〇 px보다 큰

CSS

@media not all and (max-width: 〇〇px) {
  /* 스타일 */
}

〇〇 px보다 작음

CSS

@media not all and (min-width: 〇〇px) {
  /* 스타일 */
}

 

추천1

PC 기반의 브레이크 포인트를 560px와 960px로 쓰는 방법

CSS

@media not all and (min-width: 960px) {
  /* 스타일 */
}

 

CSS

@media not all and (min-width: 560px) {
  /* 스타일 */
}

추천2

PC 기반의 브레이크 포인트를 768px와 1024px로 쓰는 방법

CSS

@media not all and (min-width: 1024px) {
  /* 스타일 */
}

CSS

@media not all and (min-width: 768px) {
  /* 스타일 */
}