mobile font size

html{font-size:calc(100vw*10/360)} @media (min-width:360px) { html{font-size:10px} } /* or */ html{ font-size:calc(100vw*11.66/420); } @media (min-width:420px) { html{font-size:11.66px} } 위 코드처럼 font-size를 주게 되면 브라우저 가로 사이즈에 따라 자동으로 폰트사이즈가 조절되고, rem으로 작성된 스타일의 크기가 자동으로 도절된다. 간단한 모바일 웹 페이지에서 사용하기 용이하다. 계산식은 아래와 같다. 10 : 360 = X : 420 10 : 360 = X : 390

2022.12.21

mobile viewport 및 기타설정

viewport meta tag 모바일 기기에서 Media Query가 예상한대로 작동하기 위해서는 웹 브라우저의 가상 해상도를 물리적 해상도와 일치시킬 필요가 있습니다. 모바일 웹브라우저들은 웹브라우저의 가상 해상도를 조절할 수 있는 viewport meta tag를 지원합니다. viewport의 속성 width viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수 도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다. height viewport의 세로 크기를 조정합니다. initial-scale 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽..

2021.12.21