정보실

웹학교

정보실

css 반응형 디자인에 적합한 CSS 중단점 값은 무엇입니까?

본문

프로젝트에서 사용하는 최적의 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) {

}

페이지 정보

조회 82회 ]  작성일19-12-19 10:39

웹학교