[Css] 반응형 단위 vw, vh, em, rem

크롬에서 폰트사이즈 변경할때 변경이됨

vw : viewport 너비의 1% vh : viewport 높이의 1% em : 요소의 글꼴 크기 rem : 루트 요소의 글꼴 크기

 

.parent {
	font-size: 8em;
}

.child {
	font-size: 0.5em;
}

보통 폰트 사이즈 지정안하면 16px인데,

parent가 8em이면 16px * 8 = 128px 로 표기가 되고

child는 128px(parent크기) * 0.5 = 64px 로 표기된다

 

퍼센트로 바꾸면 위의 em과 똑같다

.parent {
	font-size: 800%;
}

.child {
	font-size: 50%;
}

 

.parent {
	font-size: 8rem;
}

.child {
	font-size: 0.5rem;
}

parent 는 16px * 8 = 128px

child 는 16px * 0.5 = 8px

html {

  font-size: 24px;

}

처럼 지정해놓으면 크기가 변경이 안되는데

 

html {

  font-size: 100%;

}

하면 변경이 된다.

 

vw, vh는 브라우저의 높이, 넓이를 쓰겟다

50vw, 50vh 면 브라우저의 높이 넓이를 100중에 50을 쓰겠다

 

 

%는 부모요소에 맞게 유지된다.

vw는 부모 요소에는 상관없이 브라우저 크기에 따라 변경된다