在日常开发的过程中，我们可能会做b端、c端、小程序、h5等项目，这些项目使用到的单位都有所不同，现在就总结一下，在不同的场景下，都会使用到那些不同的前端单位。
前端在描述和设置尺寸、间距、大小的时候，会有以下的一些单位：
- 像素（px）：在b端场景中，经常使用
- 百分比（%）：适用于c端与b端的场景
- em：同样使用b端和c端，但本人极少使用到
- rem：适用于c端，小程序等，一般小程序项目都会有px转rem的文件
- vw，vh：css3新增的长度单位
日常干活比较常用的是这五个
1、像素（px）
px是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在 1366**768 显示屏下会显示的小，在1024*768 尺寸的显示器下会相对大点。
将px可以理解未一个长度的单位，但实际上，他的核心原理是屏幕上的物理像素，即代表显示器上的最小的一个显示单位；
浏览器会根据页面的缩放比例和屏幕的像素密度将px转换为实际的物理像素
2、百分比（%）
他是相对于父元素的长度单位； 核心的原理是相对性，相对于父元素来计算的一个属性
在h5，小程序中会经常使用，是为了能够适配各种机型，展示相关的页面
3、em
em是一种相对的长度单位，他是相对于当前元素的字体大小来计算的
在h5中，一个font-size:16px应当转化为多少em合适呢？
具体则需要看h5他的转换率是多少：一般可以通过下图查看
这个计算的公式是：字体大小/style中存在的font-size大小 这样就能够实现在不同的设备，比例相同
例如： 一个15px大小的字体，在一个 项目中
大小应该为 15/26 = 0.58 取两位小数
4、rem
1、原理
css中rem单位的计算是基于根字体大小，也就是html标签元素的font-size，未设置font-size时默认字体大小是16px，假设根字体大小就是16px，那比如2rem就等于2 * 16 = 32 px。（这里的意思就是：rem的根字体大小就是font-size）
2、动态计算根字体大小
首先需要定义下设计图尺寸(宽度)和基准值，基准值即1rem等于多少px，设计图尺寸也确定下来，就表示在该尺寸下根字体大小为该基准值。
根据上述rem原理就能得出一个公式：实际屏幕宽度 / 设计图尺寸 = 实际根字体大小 / 基准值
将上述公式调下顺序：要计算的根字体大小值 = 实际屏幕宽度 / 设计图尺寸 * 基准值 这里需要做一个em与rem的对比： rem相对于根元素； em则是相对于父元素；
5、vw，vh
vw：表示的是视口宽度的百分比
vh：表示的是视口长度的百分比
好处就是可以根据视口宽度进行自适应的调整
