프로젝트에서 사용하는 최적의 CSS 중단 점 값

https://flaviocopes.com/css-breakpoints/ 

사이트를 디자인하는 동안 CSS 중단점에 꽤 임의의 값을 사용하고 있음을 알았습니다. 

때때로 800 또는 1200과 같은 반올림 된 값, 때로는 672와 같은 픽셀까지의 특정 값.

앞으로 중단 점에 적용 할 적절한 값을 검색했습니다.

나는 이것을 찾아 볼 시간이 조금 있었고, 나는 이 결론에 도달했습니다.

걱정해야 할 5 가지 주요 장치 크기가 있습니다.

• mobile portrait
• mobile landscape
• tablet portrait
• tablet landscape
• laptop

이러한 장치는 해당 픽셀 값에 매핑됩니다.

• mobile portrait: less than 640px
• mobile landscape: > 640px
• tablet portrait: > 768px
• tablet landscape: > 1024px
• laptop: > 1280px

저는 디자이너가 아니므로 모범 사례에 매일 참여하지는 않지만 이번에는 모바일을 먼저 디자인하기로 결정했습니다.

즉, 미디어 쿼리가 없는 CSS는 모바일 인물 사용 사례를 디자인 한 다음 중단 점을 추가하여 미디어 쿼리의 max-width를 금지하면서 더 크고 더 큰 장치를 디자인합니다.

나는 항상 반대 방향으로 갔다고 생각한다. 더 큰 화면을 위한 디자인은 내가 가장 많이 사용하고, 더 작아 지지만, 모바일 우선 디자인과 min-width 사용은 오늘날 가장 많이 사용되고 사용되는 솔루션으로 보인다.

이것들은 지금부터 사용할 미디어 쿼리입니다.

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}