这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
px、百分比、em、rem、vw、vh，在开发的时候总是不太分清楚这么长得都差不多的单位，用的时候还要小纠结一下，所以翻了翻文档，又自己测试了一番终于把他们都屡明白了。
像素
先看这个图，这是放大了1200%的图，看到上面密密麻麻的小方块了吗？
一个小方块就是一个像素，不同屏幕像素大小不同，小方块越小说明屏幕越清晰。
使用场景：一般用于比较固定的模块，pc端用的比较多
这是一个200像素宽高的盒子
.box{ width: 200px; height: 200px; background: red; }
百分比
百分比是相对于父元素来的，子元素如果设置了百分比会随着父元素的变化而变化。
使用场景：希望做自适应，根据不同屏幕等比例缩放。
比如，有一个需求，我希望一个盒子能铺满全屏，试一下设置100%看看效果
发现并没有撑满，这是因为他的父级body和祖先html都没有高度，所以再把html和body设置成100%看看。
这样就可以了，所以子元素会受到祖先元素的影响。
为什么宽度可以，是因为块元素默认的宽度就是100%
em
em是相对于元素本身的字体大小来计算的，1em=1font-size，所以em会根据字体大小不同而改变
来个例子看看
这里我的html和body都设置了font-size:12px，可以看出来em是根据自身元素的font-size来计算的。
rem
rem跟em的不同就在于这个字体大小上，rem是根据根元素的字体大小来计算的
还是刚才的例子换成rem来看看效果
同样的代码换成rem可以看到这么大了，就是因为rem是根据根元素的文字大小来计算的，根元素是12px
使用场景：rem多用于移动端，为了兼容不同分辨率的手机，开发中经常把根元素的文字大小做成动态的，单位用rem，达到不同手机显示不同大小的盒子或文字大小。
vw
vw表示的是视口的宽度（viewport width），1vw=1%个视口宽度
那他跟【百分比】有什么区别呢，还是看个例子
.percent{
width: 90%;
background: green;
}
.percent ul{
width: 90%;
background: black;
}
.vw{
margin-top: 50px;
width: 90vw;
background: green;
}
.vw ul{
width: 90vw;
background: black;
}
通过上面的例子可以看到，设置【百分比】的子元素的宽度是父元素的90%，但是用【vw】他总是根据视口来计算的，所以不管父元素是多少，子元素的值总是根据视口来计算。
vh
vh跟vw一样，表示的是视口的高度（viewport height），1vw=1%个视口高度，常用于设置高度的单位
比如【百分比】那举的例子，需要做一个撑满屏的盒子，可以用vw和vh轻松实现，不需要管html和body的宽高
总结
个人的一个使用习惯：
- 【px】一般用于固定宽高的模块
- 【%】用于自适应宽高
- 【em】现在用的少了，也是用于移动端
- 【rem】配合动态计算的根元素的文字大小做移动端适配的单位
- 【vw】和【vh】主要用于做全屏时设置宽高
以上，各种单位介绍完毕，希望对你有所帮助。
