Responsive CSS units

font-size 를 px로 쓰게 되면 container의 크기가 변해도 font는 그대로.

그래서 size를 px로 사용하는 것은 좋지 않다.

Relative length units를 사용하는 것이 좋다.

그중에서도 많이 사용하는 em, rem, vw, vh, %

• em - 선택된 폰트에 상관없이 항상 고정된 폰트 사이즈를 갖는다. 부모의 폰트 사이즈를 곱한값.
• rem - 부모의 사이즈가 아니라 root에 지정된 폰트사이즈에 따라서 크기가 결정된다.
• vw - viewport 기준으로 100vw는 브라우저 넓이의 100%
• vh - viewport 기준으로 100vh는 브라우저 높이의 100%
• % - parent related. 부모 요소의 상대적 크기

parent

%, em

browser

v*, rem

box

%, v*

font

em, rem