2023년 기준 Responsive Design 모바일 & 테블릿 사이즈 (Media Query)

 

프로젝트 만들 때 마다 헷갈리지 않도록 2023년 기준으로 찾았어요. 

 

 

 

1.  @media only screen and (...) { }

 

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

 

 

 

 

 

 

 

2. Bootstrap 기준

 

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

 

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

 

 

 

 

 

 

@media, min-width를 써야할까 max-width를 써야할까?

 

min-width 를 쓰는 것이 mobile-first!

 

 

 

 

 

 

 

반응형

 

 

 

 

* 출처 

 

https://ishadeed.com/article/responsive-design/

The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed

 

https://medium.com/swlh/use-min-width-not-max-width-in-your-css-e6898fcf6a78

Use Min-Width, Not Max-Width, in Your CSS