1.百分比%

百分比是最早接触到的适配单位，依据父元素的尺寸给子元素设置尺寸。
缺点: 当父元素没有设置尺寸，高度靠内容撑开时，子元素使用百分比高度为0

<style>
	body { margin: 0; }
	.box1 {
		width: 500px;
		height: 500px;
		background: red;
	}
	.box3 {
		width: 50%;
		height: 50%;
		background: blue;
	}
	.box4 {
		width: 100px;
		height: 100px;
		background: green;
	}
</style>

<div class="box1">
	<div class="box2">
		<div class="box4"></div>
		<div class="box3"></div><!--高度为0-->
	</div>
</div>

2.em

em的尺寸参考于父元素的font-size属性
缺点: 多层次时，中间某层需要有自己的font-size时，后代尺寸会受影响

3.rem

rem的尺寸参考于根节点的font-size属性，如设置html { font-size: 20px } ，1rem = 20px; 使用rem有一个统一的尺寸标准，避免了em的缺陷。

4.vm & vh

vm和vh是参考window.innerWidth和window.innerHeight
100vm = window.innerWidth，100vh = window.innerHeight

.box1 {
	width: 50vw;
	height: 50vh;
	background: #f65536;
}
<div class="box1">可视区域1/4大小</div>

缺点: 当可视区域大小发生变化时，元素尺寸会发生变化，如在pc端，控制台打开的时候；移动端键盘打开的时候，可视区域会变小，导致元素尺寸变小。