前言
有时我们开发接触很多单位，但是我们不一定都熟悉，当别人提出某个单位的时候，我们了解也能协助我们更加方便的沟通，尤其是跟一些 UI 沟通的时候，甚至也能根据一些适配规则，说服一些 UI、产品 也说不好哈
px
px 是我们常见的像素单位，屏幕上是由很多个像素组成，像素越多显示越清晰，web端一般使用这个单位
例如:我们的 iphone 6s，宽度为 750个像素，但为了开发适配方便，由于其为二倍像素显示，实际基本单位为 750，因此引出 pt、px
ps:实际上我们接触px最多的应该是图片哈，图片一般都是多少像素多少像素说的单位就是这个
pt
pt 是 ios 中引出的屏幕宽度基本单位，以 iphone 6s 为例，为 375 pt，也是ios开发中的基本单位，其两倍像素，实际上像素为 750 px，而 iphoneX 基本单位也是 375 但是是三倍屏，也就是三倍像素 1125 px，实际基本宽度是会随着屏幕变宽而变大
dp
应 ios 的pt ，android 也出了一个单位 dp，其作用和 pt 差不多，都是基本单位，但是实际像素比例却不一定是一致的
sp
android 中的 字体设置，当字体带大小 100%时，1sp = 1px，用户可以再系统中调整字体大小，当然可以不使用sp，避免用户调整系统字体后，页面布局发生问题
em
这个web端常用的一个相对长度单位，其相对当前节点(未设置可能继承父节点)font-size，如果没设置按照默认大小 16px 来算，即：1em = 16px
说了他是一个相对长度单位，因此当前节点(父节点)font-size更新时，其会按照比例变换，例如：font-size: 20px, 1em = 20px， 2em = 40px
div {
font-size: 20px;
line-height: 1.2em;
}
rpx
这是微信小程序中比较常见的单位，其设定是以 iphone 6s 的宽度为模版(即：750宽度)，将实际屏幕宽度分割成 750 份（750rpx），即：实际开发屏幕宽度按照 750rpx 固定宽度来算，其算是一个百分比适配的典型了
用起来就是简单，直接按照设计度，无需计算，缺点就是对于浏览类的应用，大屏带来的优势稍微小一些，因为间距也会变大
此外会发现小程序类的的 px 和实际的px不太一样，其对应的是 pt、dp，这也是小程序为我们做好的处理，如果是web 项目，默认就是一倍像素，那就出问题了，而小程序、h5项目基本上会将基本单位设置跟屏幕的倍率一致，这也是比较合理的一点了
rem
这个感觉跟 em、rpx 有点想结合的意思，但是不一样哈，有些开发为了模仿rpx适配，单位使用 rem，和 em 使用类似，在 html 节点中 设置 font-size，然后其他所有的 rem 都是根据 html 节点中的 font-size 大小为基本单位使用，也是方便调整整体字体布局的一个手段（主要是切换平台时），实际上我看很多人也不是这么适配的，有的直接根据 1280*720 适配，有些直接根据 media 适配，css代码很多，移动端更多的是 pt、dp、rpx 这种策略
vw、vh
这个在web、小程序比较常见，表示的是水平百分比宽度，垂直百分比高度，100vw表示屏幕总宽度 50vw则为一半，vh也一样
