CSS로 미디어 쿼리 작성시 해상도 픽셀이 적용안되면

보통 아래와 같은 미디어 쿼리로 기기의 스크린 가로 픽셀을 구해서 미디어 쿼리를 작성하는데요.

@media (min-width: 600px)
@media (min-width: 700px)
@media (min-width: 1200px)
@media (min-width: 1600px)

이런 방식으로 모바일 기기의 다양한 가로 픽셀 크기를 구합니다. (코드마다 다를 수 있음)

그런데 이 설정이 PC 모니터 가로 픽셀도 포괄하죠. 그러다보니 맞추기가 애매해질 때가 있는데요.

애매해지는 한 경우로 이런 경우도 있습니다.

4K 모니터를 쓰면 가로 픽셀이 4000px은 되니, 위에 min-width: 1600px에 해당될 것으로 보고 혼돈이 되기도 합니다. min-width를 늘려봐도 안되니까요. 그런데 이 경우 웹브라우저의 창크기를 바꿔서 가로 픽셀을 1200px로 맞추면 (min-width: 1200px) 이 설정이 되고, 1600px로 하면 (min-width: 1600px) 이 설정이 됩니다.

자바스크립트 등의 변조나 OS 상태도 문제될 수 있으나, 웹브라우저 창크기를 조절해보고 적용되는지 확인해보세요.

창크기는 창 가장자리를 드래그하면 되는 것 아시죠?

보통 모바일 웹브라우저는 설정이 안되면 고정이라, 모바일과 PC를 넘나들면서 설정하다보면 PC 모니터 가로 픽셀만 생각하고 창크기는 안생각하게 되는데, 창크기 조절도 한 해법이 됩니다.

제 경우 모종의 원인으로 창크기 조절과 준하는 랜드스케이프 설정이 안먹히게 되어 잠시 잊었는데, 창크기 조절을 해가면서 미디어 쿼리의 기기 해상도 설정에 맞추어 웹브라우저 창크기 조절을 해가면서 확인하면 좋습니다.

---

이 설정을 할때 viewport도 조정하면 좋습니다.

와 같이 설정하고 위 본문에서 제시한 @media (min-width)를 모두 지정해주면 표시가 더 합리적으로 되네요. 모바일 기기에서 무조건 HTML 표시 영역(div 등등)을 위아래로 분리해서 표시되게 안해도 됩니다. PC에서 보여지는대로, 같은 3단 구조도 되네요.

물론 현재 널리 쓰이는 기종들이 가로 픽셀이 1080px이 넘어갈때구요. 옛날 태블릿이나 가로 픽셀이 작은 모바일 기기는 기존 설정처럼 위아래로 분리해서 배치할 수밖에 없네요. (가로 픽셀 720px 보다 작은 경우) 랜드스케이프 모드로 돌리게 공지하거나요.

이 경우에도 @media (min-width) 크기를 잘 조정해서 모든 장치를 아우르게 여러개의 미디어 쿼리를 운용하면 되죠.

요약해보면

(1) @media (min-width)를 각각의 시나리오대로 모바일 기기를 다 아우르게 따로 지정해야 함
(2) viewport 태그도 잘 조정해서 minimum-scale, maximum-scale, user-scalable 등을 잘 지정해야 함

이 두가지를 잘 조합하면 레이아웃 지정을 잘 하게 됩니다. (1)의 경우 폰트 크기와 HTML 표시 요소 등의 폭을 조정해야 할때도 있습니다.

이렇게 HTML 헤더에 지정해두고

이런식입니다.