css 单位 px、em、rem、rpx、vh、vw 的解释比较
平时写代码对这些概念知道得模模糊糊，看了些解释也云里雾里的，没影响到日常工作就随它去了，今天实在忍无可忍决定探究清楚，如果有理解不对的地方欢迎指正。
1. px
px也就是像素，是最迷惑我的单位，第一印象它是绝对长度，是定死的，所以想要响应式布局和自适应布局不要用它。但其实”绝对“，”定死“这些并不准确，它的大小也是会随着屏幕变化的。
我们先来看一个概念——设备的物理像素，单位是pt。首先需要明确一个设备的物理像素是固定不变的，由硬件决定。已知 ipad 屏幕分辨率是 768 x 1024，那么可以想象为把屏幕分割成 768 x 1024个小格子，每个格子的面积就是1pt。同样，iphone5 屏幕分辨率是 320 x 568 ，那它就是长320pt，宽568pt（虽然用面积来形容长宽看起来很奇怪）。你可能会问 ipad 的 1pt 和 iphone5 的 1pt 大小一样吗？从字面看起来似乎是一样的，但细想并不合理。我们一般说的大小指的是实际物理大小，单位是面积单位，那么设备的1pt 对应的面积应该等于 设备屏幕面积/设备分辨率。而这里有更专业的说法：PPI（屏幕像素密度），每英寸(2.54厘米)聚集的像素，这里的1英寸是对角线长度，其实本质还是面积。因此，不同设备的1pt从物理认知上来说其实是不一样大的。那么我们css用的单位px跟pt有什么关系呢？在早期开发中，本来1pt = 1px，但随着科技的发展，移动端分辨率越来越高，但尺寸却没有变化，如果继续用1pt表示1px，想想前面提到的PPI，屏幕尺寸不变，分辨率越高每英寸聚集的像素越多，即1px占用的屏幕面积越小。同一张图片原来可以正常显示，分辨率提到到2倍大小会变成原来的1/2，这肯定是不行的。因此又有了新的概念DPR(设备像素比)：设备物理像素 / 设备独立像素（在前端就是css像素）。这样我们就可以用1px = 2pt解决刚才图片面积是原来1/2的问题。
2. em、rem
rem使用更方便且用途更普遍，所以我们先来看rem。非常简单，设定根元素<html>的font-size属性，默认为16px，那么1rem = 16px。设置为20px，那么1rem = 20px。为了简化计算，我们想令1rem = 10px，就设定根元素font-size为10px或者62.5%（16*62.5%=10）。用 rem 有什么好处？可以实现响应式布局了！响应式布局指的是元素大小能根据屏幕大小随时变化，因为 rem 布局里所有大小跟着根元素变化，所以只要在屏幕大小变化的时候改变根元素font-size就行了。
// 监听屏幕大小变化 window.onresize = function () { var html = document.documentElement; // 获取屏幕的宽度 var w = document.documentElement.clientWidth || document.body.clientWidth; // 根据设计图设置大小 html.style.fontSize = 16 * (w / 1024) + 'px'; }
em同rem差不多，只不过它是相对于父元素，父元素的font-size要换算成px，比如父元素font-size为5rem，根元素是10px，那font-size为1em的子元素大小就是50px。
3. rpx、vw、vh
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
rpx是微信小程序为了解决自适应屏幕尺寸设计的单位，它规定任何屏幕的宽都是750rpx。上面的开发文档提到在 iPhone6 上，共有750个物理像素(单位pt)，根据 iPhone6 的 DPR=2 所以屏幕宽度为375px(这是css像素)，则750rpx = 375px = 750pt，1rpx = 0.5px = 1pt。优点是能适应不同尺寸和分辨率的屏幕。之所以把rpx与vw、vh放一起是因为它们本质上是一样的，都是以百分比的形式作单位。vw是css3新出的单位，规定任何屏幕宽都是100vw，高100vh，这里的屏幕指的是视口，即浏览器窗口，不受分辨率和dpr影响，还是很方便的。
最后要注意的是使用这些单位要考虑不同浏览器的兼容性，在合适的地方选择合适的单位。
参考：
https://www.zhihu.com/question/21149600/answer/29971490
https://baijiahao.baidu.com/s?id=1606146424842978662&wfr=spider&for=pc
https://blog.csdn.net/QQ729533020/article/details/99739596
https://blog.csdn.net/a419419/article/details/79295799
