先上楼主的图
首先，咱们需要了解以下几个专有名词和单位
这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。
首先，先来看一下物理像素。
以iphone6为例，可知道：
分辨率：1334pt x 750pt
指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。
屏幕尺寸：4.7in
注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。
屏幕像素密度：326ppi
指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度=分辨率/屏幕尺寸
接着，我们来看一下其他的单位。
设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。
设备像素比：缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。可以通过JS来获取：window.devicePixelRatio
链接：demo项目
原文链接：https://segmentfault.com/a/1190000011586301