브레이크 포인트 알아보기

브레이크 포인트 알아보기

스마트폰, 태블릿, 데스크톱 등 여러가지 디바이스에 최적화된 표현을 하기 위해서는 브레이크 포인트가 필수입니다.

 

브레이크포인트란

미디어 쿼리를 사용해 디바이스별로 적용하는 css를 나누는 분기점을 말합니다. 

 

예를 들어 min-width:700px라고 정의하면 700px이 브레이크 포인트 입니다.

모바일 디바이스는 대부분 세로로 사용해 화면의 세로 폭 기준은 브레이크 포인트로 합니다.

 

 

주로 사용하는 iOS 디바이스 화면과 비율

디바이스	화면세로폭	화면 가로폭	retina 배율
ipad(10.2")	810	1080	2
ipad air(10.9")	820	1180	2
iphone xs max / 11 pro max	414	896	3
iphone xr / 11	414	896	2
iphone 12 / pro	390	844	3
iphone x / xs / 11pro	375	812	3
iphone 6~8 plus	414	736	3
iphone 6~8	375	667	2

 

디바이스에 따라 화면 비율이 달라 브레이크 포인트를 정할때는 어느정도 여유있게 해야 합니다.

retina 배율은 디바이스의 해상도 배율을 의미하며 값이 높을수록 더 선명하고 깨끗하게 보입니다. 미디어 특성인 resolution으로 설정할 수 있습니다.

 

 

RWDB(responsive web design DB)

국내 반응형 웹디자인 모음 사이트. 스타트폰, 태블릿,데스크톱에서 어떻게 표시되는지 한눈에 알수 있습니다.

 

http://rwdb.kr

RWDB