px : 절대값으로 사용되는 단위입니다. 고정값이여서 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않습니다.

em : 부모 태그의 영향을 받는 상대적인 길이의 길이입니다. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있습니다. 반응형 웹사이트를 작업할때 많이 사용됩니다.

rem : rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이입니다. 즉 html 요소에 font-size를 고정값으로 지정해두면 그 비율에 따라 크기가 계산됩니다.

em : relative to parent element

<div class="parent">
	Parent
	<div class="child">Child</div>
</div>

.parent {
	font-size:8em; // 16px * 8 = 128px
}

.child {
	font-size: 0.5em; // 128px * 0.5 = 64px
}

//html/body에 font-size를 지정하지 않으면 16px이 기본 값

r(root)em : relative to root element

<div class="parent">
	Parent
	<div class="child">Child</div>
</div>

.parent {
	font-size:8em; // 16px * 8 = 128px
}

.child {
	font-size: 0.5em; // 128px * 0.5 = 8px
}

//html/body에 font-size를 지정하지 않으면 16px이 기본 값

부모요소의 사이즈에 따라서 사이즈가 변경되어야한다면 %, em

부모와 상관없이 브라우저 사이즈에 따라서 변경되어야한다면 v*, rem

요소의 여비와 넓이에 따라 사이즈가 변경되어야한다면 %, v*

font-size에 따라 사이즈가 변경되어야한다면 em, rem

간단한 예시