rem em vw px rpx
1.px
什么是像素：
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)
像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。
分类：
实际上像素分为两种：设备像素和CSS像素
1、设备像素(device independent pixels): 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的
2、CSS像素(CSS pixels): 又称为逻辑像素，是为web开发者创造的，在CSS和javascript中使用的一个抽象的层
每一个CSS声明和几乎所有的javascript属性都使用CSS像素，因此实际上从来用不上设备像素 ，唯一的例外是screen.width/height
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
我们会发现在iphone5下device-width=320，iphone6下是375，iphone6+下是414，那也就是说device-width其实就是开发中屏幕宽度有多少pt和dp。
device-width在html中也同样被解读为理想（基准）视口的宽度，即320px，375px，414px，这里的px就是指css像素，通常也被称为逻辑像素；那我们可以认为html中的css像素的显示尺寸应该和NA中的pt、dp的显示尺寸相等。
pt是一种固定长度的度量单位，是能够使用测量设备测得的长度。
DPR (倍屏)
设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
dpr，也被成为device pixel ratio，即物理像素与逻辑像素的比，那也就不难理解：iphone6下dpr=2，iphone6+下dpr=3（考虑的是栅格化时的像素，并非真实的物理像素）;而对于设备像素比DPR也有对应的javascript属性window.devicePixelRatio
2.em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
特点:
- em的值并不是固定的；
- em会继承父级元素的字体大小。
3.rem
定义:
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是根元素<html>。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
默认情况下，设计图为375时，为了更好的实现与设计稿的单位换算，比如达到：20px=0.2rem的目的，此时1rem=100px，这时可以给予html{font-size：100px；}，同理，当设计稿为414，750时，html的
fontSize = 100*(设计稿尺寸/视口宽度)px
正常开发时，一般输入设计图的px，通过前端项目的webpack等编译工具，进行px->rem的转换，依赖包：amfe-flexible.js
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
看代码可以发现，包作者默认设置1rem=viewWidth / 10，此时假设设备像素为375，则此时1rem=37.5px;
此时，如果代码中写24px，经过webpack转换，在浏览器中就会是：
15/37.5=0.4rem
4.vw
- vh viewpoint height，视窗高度，1vh 等于视窗高度的 1%
- vw viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%
viewport即浏览器可视区域大小
我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight
在移动端我们一般都可以认为，100vw就是屏幕宽度。若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size。
此时，如果我们现在浏览器中想让一个字体大小为15px的元素，则它在浏览器上的显示为
15*(100/375)=4vw
为方便开发，引入依赖postcss-px-to-viewport，实现开发时写入设计稿px，得到浏览器显示为vw的效果。
5.rpx
小程序与uniapp使用的单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算
