mobile font size
2022. 12. 21. 11:34ㆍSTUDY/StyleSheet
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
'STUDY > StyleSheet' 카테고리의 다른 글
| 사파리 overflow:hidden + border-radius 관련 이슈 해결법 (0) | 2023.09.08 |
|---|---|
| [CSS] 웹 접근성을 고려한 .blind .hidden 처리 (0) | 2023.02.24 |
| CSS 방법론 (0) | 2022.12.07 |
| 마우스 커서 변경하기 (0) | 2022.11.18 |
| [CSS] scrollbar webkit (0) | 2022.09.07 |
