반응형 웹 개발할 때 레이아웃 px과 이미지 크기

기본

사이트를 반응형으로 개편하면서 한가지 궁금한 점이 생겼습니다. 맥의 레티나 디스플레이나 요새 모바일은 물리적인 화면은 작아도 해상도는 2배-3배인 경우가 있기 때문에 미디어 쿼리의 max-width < 760px 같은 수식이 정말 모바일을 구별 할 수 있을까? 하는 점이죠.

원리는 의의로 간단했습니다. 안드로이드의 dp 개념처럼 웹브라우저도 density 값을 가지고 해상도 / density를 한 값을 미디어 쿼리가 사용합니다. 그래서 해상도가 높아도 모바일과 데스크탑을 구분하는게 가능합니다.

http://uhb.kr/book/wiki/rwd/resolution/

위 사이트에서 브라우저가 계산하는 실제 해상도 크기를 볼 수 있죠.

정리해보면 density가 1인 모니터에서 작업을 할 때 디자인 가이드라인의 px 값은 그대로 사용하고(desity가 다른 환경에서도 동일한 크기로 보여질 테니 말이죠.) 이미지들은 2배-3배 크기가 따로 필요합니다. (아니면 density가 높은 환경에서 이미지를 늘여서 표시해야 하니까요.)

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중