一、px

整个屏幕的一个像素点。

二、em单位

• 1em：16px浏览器的默认值
• 1em = 基准值（16px）* number（1）= 16px
• 2em = 基准值（16px）* number（2）= 32px

当默认值改了，基准值也会跟着改，尺寸是基于父元素的设置的值改变的：

div {font-size: 10px;
}.box-ul li {font-size: 2em;
}

<div><!--原始设置的大小10px--><ul><li>1</li></ul><div class="box-ul"><!--设置大小为父布局的2em，即10px*2=20px--><ul><li>1</li><li><ul><!--设置大小为父布局的2em，即20px*2=40px--><li>1</li></ul></li></ul></div>
</div>

会导致内层的字体越来越大，实用性不强。

三、rem单位

•  rem：相对值，基于根标签（html标签）
• 1rem = 基准值（16px）* number（1）= 16px

html {font-size: 62.5%;
}div {font-size: 30px;
}.box-ul li {font-size: 2rem;
}

<div><!--原始设置的大小30px--><ul><li>1</li></ul><div class="box-ul"><!--设置大小为html的2em，即10px*2=20px--><ul><li>1</li><li><ul><!--设置大小为html的2em，即10px*2=20px--><li>1</li></ul></li></ul></div>
</div>

四、vh/vw 

• vh - height - 屏幕的百分比高
• vw - width - 屏幕的百分比宽

* {margin: 0;padding: 0;box-sizing: border-box;
}
.home {height: 100vh;width: 50vw;background: greenyellow;
}
.about {height: 43vh;width: 54vw;background: green;
}

<div class="home"></div>
<div class="about"></div>

五、calc

动态计算大小，例如下面动态填满一屏。

* {margin: 0;padding: 0;
}
.nav{background: blue ;height: 6rem;color: white;font-size: 3rem;
}
.banner {background: red;height: calc(100vh - 6rem);
}

<ul class="nav"><li>哈哈哈</li>
</ul>
<div class="banner"></div>

height: calc(100vh - 6rem);表示banner的高度为上面整屏高度减去nav的高度。

注意：运算符前后需要有空格，calc(100vh-6rem)这样写错误。