[CSS] 반응형 사이즈 단위 알아보기 (em/vw/vh/vmin/vmax)

em

부모에 지정된 사이즈를 기준으로 1em이 된다. 

 

현재 box에 font-size가 20px 로 지정되어있기 때문에 

.fs1의 1em 은 20px 이 되고 2em은 40px이 되는 것이다. 

 

 

vw 

창전체의 width값을 기준으로 100분의 1 크기가 1vw가 된다. 즉 100vw는 창 넓이 

 

vh

창전체의 height값을 기준으로 100분의 1 크기가 1vh가 된다. 즉 100vh는 창 높이

 

 

 

 

 

다시한번  회색 박스 안의 사이즈로 em을 알아보자

자신의 부모영역에 지정된 크게의 비율로 지정되기 때문에 

 

.box1 에 font-size : 20px 을 주고 

.box1-sub 에 font-size : 1.5em 을 주면 이값은 20*1.5 = 30px

.box1-sub-sub 에 font-size: 1.5em을 주면 30*1.5 = 45px 이 된다..

 

 

 

vmax vmin

 

 

.box1 의 크기는 

width: 30vmax; 
height: 100vmin; 

을 주었는데 

 

30vmax는 30vw 와 30vh 중 큰 값을 뜻하고

100vmin은 100vw와 100vh 중 작은 값을 뜻한다.