CSS : 하드웨어 픽셀 VS 소프트웨어 픽셀

VueJS 프로젝트를 만들고나면
기초 css 파일에 #app의 max-width값이 지정되어 있는 것을 확인할 수 있다.

CSS의 미디어 쿼리를 작성할 때는 보통
base가 되는 최상위 컴포넌트의 픽셀값을 따로 명시하지는 않고
HTML의 head 태그 안에

<meta name="viewport" content="width=device-width, initial-scale=1.0">

를 명시하여

디바이스의 디스플레이 크기에 따라 device-width가 적용되게한다. 

 


CSS는 하드웨어 픽셀 대신 소프트웨어, 즉 , CSS 픽셀을 참조한다.

하드웨어 픽셀은 기기의 디스플레이 스펙 그 자체라고 보면 된다.
디스플레이의 해상도 글에서도 언급했듯이
같은 해상도여도 디스플레이의 크기와 작고 큼에 따라서
화질이 다르게 보인다.

CSS픽셀은 DPR을 사용하여 하드웨어 픽셀이 CSS 픽셀값으로 매핑된다.
DPR = Device Pixcl Ratio.
갤럭시S22의 경우 DPR값은 3이고 하드웨어 디스플레이의 가로의 픽셀 수가 1080이다.


S22에서 크롬 앱 등의 브라우저 앱을 사용할 때,
브라우저는 웹사이트에 1080px 물리 픽셀 값을
DPR값 3으로 나눈 값인 370px을 전달한다.

서버는 이 값을 인식하고 적당한 미디어쿼리 값에 맞는 CSS를 Return한다.

위와 같은 경우 모바일 페이지에 적합한 CSS를 Return 할 것이다.

최종적으로 S22의 웹브라우저에서는
CSS 뷰포트의 가로 길이가 360pixel인 디자인이 페인팅된다.