单位是我们前端开发中常用到的，但单位多而杂，于是鄙人就斗胆尝试一下将前端开发中常用的单位给整合一下，咱就直入主题了！
声明
这个只是给予前端开发常用单位直观了当的基础认识 定位为科普和入门向文章 并不涉及更深度的探讨（我不会qwq） 有纰漏欢迎指正 咱就以绝对单位和相对单位进行划分
绝对单位
绝对单位，顾名思义，就是说很绝对的单位，数值都是固定的，说多长，就是多长。
px
1px=屏幕上的一个像素=1/96th of 1in，px定义是相对与观看设备的单位，但其实设备其实目前大多趋同，就关系不大，在这当做绝对单位，不喜轻喷。，px的使用性极广，也是前端开发中经常出现的单位。
pt
点，1pt＝1/72英寸，数值越大，字体越大，现在网页中pt基本上不会出现。
pc
派卡（我是土狗，我又没见过这个单位......）派卡 (1pc = 12 pt)，应该也很少见了这个单位。
cm/mm
这个不用解释了吧？但为了开发方便，大多时候还是以px为主，用可以用，但我个人觉得不该多用。
in
in是英寸，英寸 (1in = 96px = 2.54cm)，应该会有人用吧？我是查资料才查到这个的......
效果对比（依次/以10为数）
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。（这是我查资料的时候别人说的，我觉得绝对长度和相对长度的使用仁者见仁智者见智。）
相对单位
相对单位也很好理解，就是相对的单位（废话）
em
相对于元素字体大小的单位，例若2em 表示长度为当前字体大小的 2 倍
示例
font-size: 30px;
text-indent: 2em;
效果为其首行缩进60px（空白处是由于浏览器自带的边距）
ex
相对于当前字体的高度的一半的单位，例如2ex表示当前字体高度的一半15px*2=30px
示例
font-size: 30px;
text-indent: 2ex;
效果为其首行缩进30px（空白处是由于浏览器自带的边距）
rem
相对于根元素的字体大小的单位，注意，这里是根元素，它不依赖当前元素，无论什么地方，他都是等值的，大部分浏览器根元素的字体大小为16px，这就意味着通常1rem=16px，想要用rem调整大小，则要以想要的大小/根元素大小
示例
font-size: 60px;
text-indent: 2rem;
假设想要用rem调整为12px，既要12/16=0.75rem
font-size: 60px;
text-indent: 0.75rem;
vw/vh/vmin/vmax中的V
v既viewport，视口，PC端指的是浏览器的可视区域；移动端指的就是Layout Viewport（布局视口）
vw与vh
vw是相对于相对于视口*宽度的 1% 的单位，既视口宽度的百分之一
vh是相对于相对于视口*高度的 1% 的单位，既视口高度的百分之一 w是宽width，h是height
示例（浏览器视窗宽度，高同理）
.try {
width: 1vw;
height: 1vw;
background-color: blue;
}
<div class="try"></div>
vmin与vmax
vmin是相对于相对于视口*较小尺寸的 1％ 的单位，既视口中较小元素的百分之一
vmax是相对于相对于视口*较小尺寸的 1％ 的单位，既视口中较大元素的百分之一
简单来讲，就是在
<div class="try"></div>
给.try使用vmax和vmin
.try {
width: 10vmax;
height: 10vmin;
}
则.try的宽为vmax------浏览器默认宽高二者间最大值height的百分之一，既此时最大值高*1%*10
.try的高为vmin------浏览器宽高二者间最小值weight的百分之一，既此时最小值宽*1%*10
效果图
注意：v系列的单位鱿鱼丝相对于视窗，所以视窗变化也会导致以v系列为单位的盒子的变化
像上面的代码，调整浏览器视窗后效果如图
随便的结语
此文只是笼统的解释了一遍常用的单位，看完之后上手建议亲身实践一下
参考网站
CSS 单位 绝对单位 相对单位_Abudula__的博客-CSDN博客_css相对单位
