[css] Truly Fluid Typography With vh And vw Units

Truly Fluid Typography With vh And vw Units

https://www.smashingmagazine.com/2016/05/fluid-typography/

1 viewport width (vw) is equal to 1% of the viewport’s width

1vw이면, width:1600px일 때 폰트크기가 16px이 된다.

2vw이면, width:800px일 때 폰트 크기가 16px이 된다.

width:320px일 때 12px이 되려면 font-size:3.75vw 이다.

12/3.2 = 3.75

width:360px일 때 16px이 되려면 font-size:4.444vw 이다.

12/3.6=3.333333...

16/3.6=4.444444...

• vw: viewport width
  화면 가로 넓이에 맞춰 크기가 변함
• vh: viewport height
  화면 세로 길이에 맞춰 크기가 변함
• vmin: the smaller value of the viewport’s width and height
  가로와 세로 중 작은 쪽
• vmax: the larger value of the viewport’s width and height
  가로와 세로 중 큰 쪽
  
  

문제점 : 브라우저 화면이 작아질 경우 폰트가 읽을 수 없을 정도로 작아지고, 

클 경우엔 기대 이상으로 커짐.

그럴 경우 Media Query를 사용하여 최소 사이즈와 최대 사이즈를 정한다.

width:320px을 기준으로 기본폰트사이즈를 12px로 할 경우

width:720px 이상 커지지 않을 경우

html{font-size:3.75vw;} /* 12 / 3.2 = 3.75 최소 폰트사이즈 / (최소 넓이/100)  */

@media (max-width:319px) {

html{font-size:12px;}

}

@media (min-width:721px) {

html{font-size:27px;} /* 7.2 * 3.75 = 27 (최대 넓이/100) * 폰트배율  */

}