가변 폰트

상속 기준

(가변 폰트 적용할 글자 크깃값 / 부모 요소의 글자 크깃값) = 가변 폰트값

예제1

html의 폰트 기본 사이즈는 16px이다. em 단위는 부모 요소 값의 배수로 적용되며, 가변 폰트1은 기본 사이즈의 6배로 96px의 값을 갖는다. 자식 요소인 가변 폰트2는 64 / 96 = 0.67em로 설정된다. 반면, rem 단위는 0.67rem으로 수치는 같지만, rem은 최상위 요소 값의 배수로 적용되므로 10 / 16 = 0.67rem이 된다.

뷰포트 기준

vw 단위 : (vw 단위를 적용할 글자 크깃값 브라우저의 너빗값) / 100 = 크깃값
vh 단위 : (vh 단위를 적용할 글자 크깃값 브라우저의 높잇값) / 100 = 크깃값

예제2

1vw/vh는 각 뷰포트 사이즈의 1/100을 의미한다. 예제2에서는 5/100 크기로 설정했다. vmax/vmin은 vw/vh 중 큰 값과 작은 값에 대응한다.

참고
Do it! 반응형 웹 만들기