1. 字体的px,em和rem
1.1 px
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
1.2 em
- 子元素字体大小的em是相对于父元素字体大小
- 元素的width/height/padding/margin用em的话是相对于该元素的font-size
1.3 rem
rem中的r代表的是是root。
rem是全部的长度都相对于根元素，根元素是谁？<html>元素。
通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
1.4 总结
在做项目的时候用什么单位长度取决于具体的需求，但一般是这样的：
- 像素（px）：用于元素的边框或定位。
- em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。
2. 分辨率，PPI，DPI，DPR的概念解释
2.1 分辨率
是指设备屏幕宽度上和高度上最多能显示的物理像素点个数。
2.2 PPI
PPI：Pixel Per Inch。屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸是对角线长度。
2.3 DPI
DPI：Dots Per Inch。每英寸像素点，印刷行业标准。衡量打印机精度以及图片精度的标准。
2.4 DPR
DPR：Device Pixel Ratio。是默认缩放为100%的情况下，设备物理像素和CSS像素的比值。
举个例子：
这里先无限diss B站中的某个傻X老师，乱讲一通，害得我思考了好久。
iPhone6的CSS的物理像素是：750x1334。
iPhone6默认的DPR=2，那么其默认的css逻辑像素就375x667。
这样的结果是什么呢？结果就是，如果你在代码中写了
<div style="width=375px;height:667px"></div>这个div就会充满iPhone的屏幕。相当于css中的1px占用了手机的2个像素。
2.5 应用
2.5.1 有了以上的概念，我们便可以通过动态viewport设置页面，使css像素对应设备屏幕物理像素。
<script type="text/javascript">
var scale = 1/window.devicePixelRatio;
document.write(`
<meta name="viewport" content="initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no" />
`);
</script>2.5.2 还可以模仿微信对屏幕的丈量标准，将屏幕宽度分为750份。
<script type="text/javascript">
var unit = window.innerWidth / 750; //将屏幕分为750个单位
document.write(`
<style>
html{
font-size:$(100*unit)px; /*根元素字体大小是100个单位*/
}
.zhengWen{
font-size:0.05rem; /*正文字体大小是5个单位*/
}
</style>
`);
</script>