背景
因为要适配的设备有点多，经常性出现适配问题，单位又多的一批，烦死了
所以我决定从头来看，这些单位到底代表什么，和分辨率， 到底是个什么关系
我先放个移动端的iphone 设备表在这，再来分析
| 手机设备型号 | 屏幕尺寸 | 分辨率点数 | 设备像素比(DPR) | 分辨率像素 | 屏幕比例 |
|---|---|---|---|---|---|
| iPhone SE | 4.0英寸 | 320x568 | @2x | 640x1136 | 16:9 |
| iPhone 6/6s/7/8/SE 2 | 4.7英寸 | 375x667 | @2x | 750x1334 | 16:9 |
| iPhone 6p/7p/8p | 5.5英寸 | 414x736 | @3x | 1242x2208 | 16:9 |
| iPhone XR/11 | 6.1英寸 | 414x896 | @2x | 828x1792 | 19.5:9 |
| iPhone X/XS/11 Pro | 5.8英寸 | 375x812 | @3x | 1125x2436 | 19.5:9 |
| iPhone XS Max/11 Pro Max | 6.5英寸 | 414x896 | @3x | 1242x2688 | 19.5:9 |
| iPhone 12 mini | 5.4英寸 | 360x780 | @3x | 1080x2340 | 19.5:9 |
| iPhone 12/12 Pro | 6.1英寸 | 390x844 | @3x | 1170x2532 | 19.5:9 |
| iPhone 12 Pro Max | 6.7英寸 | 428x926 | @3x | 1284x2778 | 19.5:9 |
| iPhone 13 mini | 5.4英寸 | 360x780 | @3x | 1080x2340 | 19.5:9 |
| iPhone 13/13 Pro | 6.1英寸 | 390x844 | @3x | 1170x2532 | 19.5:9 |
| iPhone 13 Pro Max | 6.7英寸 | 428x926 | @3x | 1284x2778 | 19.5:9 |
以下部分内容，我们拿iPhone 13这款机子举例子
物理像素
我们经常性会看到各种各样的分辨率
就如iPhone 13，我们都能看到两个分辨率
一个是分辨率像素 1170x2532
一个是分辨率点数 390x844
那么我们来说说这两个分别是啥
1170x2532,意味着，他横向有1170个像素点，纵向有2532个像素点
这些像素点在硬件设备出厂的时候就定下来了，由设备元器件决定，是物理的
因此分辨率像素 1170x2532指的就是物理像素
我们看的屏幕上不同的画面，其实就是通过一个个像素点渲染出来的
我们常说的有些屏幕看起来有颗粒感，显得很廉价，有一股像素风的感觉
其实就是指用来拼凑出画面的一个个点非常大
放到边缘看，一旦页面放大，就会有锯齿感
我们假设，有两个宽高相同的设备A，B
设备A屏幕像素点比较多，像素分辨率为100x100
设备B为10x10，那么谁的画面更有颗粒感，谁的更精细呢？
逻辑像素
物理像素有了，那什么是逻辑像素呢？
比如在2000年，我推出了一款设备，是10英寸x10英寸的
那时候我一个像素点的发光元器件只能做到1英寸这么大，即1px=1英寸如下图左边
我要写个盒子铺满这是十个像素，当然是
{
height:10px;
width:10px;
}
而2020年，我新推出了一款设备，还是10英寸x10英寸的
但是这时候技术升级了，我一个像素点的发光元器件可以缩小到1/4英寸这么小，如上图右侧
这时候要展示10英寸x10英寸大小的盒子，我就要是原来的好多倍了
而且技术不断革新，可能未来越来越小呢，不可能软件不停的去改啊
所以这时候，就有了逻辑像素的出现，不管你物理像素缩的多小，逻辑上，这个设备的宽高像素点就是一定的
依旧以iPhone 13这款机子为例，上面我们说到的分辨率点数390x844就是指这个逻辑分辨率
DPR(设备像素比)
我们观察上表，有个叫做设备像素比(DPR)的，iPhone 13为@3x
做iOS开发的老哥应该很熟悉，图片都有@2x，@3x
表示一个设备的物理像素与逻辑像素的比
1170/390=3 2532/844=3
ppi（像素密度）
那么接下来，我们说说ppi（像素密度）
依旧以iphone 13举例
iPhone 13屏幕比例为19.5:9,根据勾股定理，我们可以列出式子(19.5x)^2 + (9x)^2 = (6.1)^2
解出x约等于0.284
则高约为5.538英寸，宽为2.55英寸
(当然，主要是没仔细查屏幕的宽高，有时间的同学自己查一下，就免得算了=。=)
那么我们算算它的PPI（1英寸像素密度）
其实非常简单
2532/5.538 约等于457
或
1170/2.55 约等于等于458
那么实际上，iPhone 13的像素密度为460，和我们估算的差不多，毕竟宽高我们都是估算的=。=
其实就是物理像素（高）/高（英寸）或物理像素（宽）/宽（英寸）
记得是英寸啊
然而
大部分时候，不会去列举屏幕的宽高英寸，而是标注屏幕大小（斜对角线）
因此有另一个计算公式
DPI
说完了ppi，有的时候，如果做安卓，我们还会听到一个词，叫做dpi
实际上查来查去，人都疯了，直接把他们相等处理，多数情况下，DPI=PPI。
分辨率
那么经过上面这么多铺垫
我们现在应该知道了
物理分辨率是指，物理像素的分辨率，1170x2532
逻辑分辨率是指，逻辑像素的分辨率，390x844
接下来说单位
说在前面
css中我们写的px，实际上也是会随着物理分辨率的变化而调整的，所以它其实是逻辑像素
这里就产生了一个经典的面试题移动设备上h5的1px像素问题
指得就是css写了1px，但是在某些设备上，展示了2px以上的宽度
px
我们在css中写的px，是逻辑像素
pt
是一个标准的长度单位，1pt＝1/72英寸，打印常用
但是我们不是打印！就展示而言，但其实也和DPR有关
可见参考资料CSS长度单位：px和pt的区别 - 莫问奴归处 - 博客园 (cnblogs.com)
其中最重要的一句话，我引用过来
使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。
em
摘自pt，px，rem和em之间区别总结 - SegmentFault 思否
em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。
<body style="font-size:14px">
<p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>
<div style="font-size:18px">
<p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
</div>
</body>
如果没有特殊设置
浏览器中默认font-size的设定为16px
即1em = 16px, 但是这就不好算了
所以在使用em的时候，有时候会这么做：
body选择器中，设置font-size为62.5%，这时候，默认font-size就缩放为了10px，这个时候1em = 10px了
<body style="font-size:62.5%">
<p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>
<div style="font-size:18px">
<p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
</div>
</body>
rem
摘自pt，px，rem和em之间区别总结 - SegmentFault 思否
em是css3新增的一个相对单位，与em的区别在于，它是相对于html根元素的(在body标签里面设置字体大小不起作用)。还是上面那个例子，如果换做rem，结果如下：
<body style="font-size:14px">
<p style="font-size:2rem">我这里的字体显示大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>
<div style="font-size:18px">
<p style="font-size:2rem">我这里显示字体大小是32px(16px*2),因为我是根据html根元素的font-size大小进行计算的</p>
</div>
</body>
同上
vh,vw,vmax,vmin
vw：视窗宽度，1vw等于视窗宽度的1%。
vh：视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
（vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持）
那么回到最上面的问题，如何处理不同设备的适配呢？
假如我使用媒体查询，预区分不同设备
使用window.devicePixelRatio来获取DRP
使用rem单位
在不同设备设置不同的font-size，是不是就能达到适配效果？
以上均为胡说八道，不对正确性负责
如有不对，请在评论区指出，非常感谢
参考资料
CSS长度单位：px和pt的区别 - 莫问奴归处 - 博客园 (cnblogs.com)
px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_flyingpig2016的博客-CSDN博客
逻辑分辨率和物理分辨率到底是什么呀？ - 知乎 (zhihu.com)
pt，px，rem和em之间区别总结 - SegmentFault 思否
px,pt,ppi,dpi,dp,sp,em,rem,vw和vh等css中常用长度之间区别总结_flyingpig2016的博客-CSDN博客
