vw
vw 단위는 뷰포트 너비를 기준으로 상대적인 크기를 가집니다. 뷰포트는 간단히 말해 코드가 보이는 대상이라고 생각하면 됩니다. 따라서 웹이나 모바일에서는 웹 브라우저 창의 너비가 뷰포트 너비가 됩니다. 1vw는 뷰포트 너비의 1/100 크기를 의미합니다.
/* 기준 뷰포트 너비 900px */
.parent{
font-size:1vw; /* 900px * 1/100 = 9px */
}
.child{
font-size:2vw; /* 900px * 2/100 = 18px */
}
vh
vh 단위는 뷰포트 높이를 기준으로 상대적인 크기를 말하며, 1vh는 뷰포트 높이의 1/100 크기를 의미합니다.
/* 기준 뷰포트 높이 400px */
.parent{
font-size:1vh; /* 400px * 1/100 = 4px */
}
.child{
font-size:2vh; /* 400px * 2/100 = 8px */
}