1、前言：
读完本文你会学到什么：
- dp(device pixels)
- px(css pixels)
- pt(point)
- ppi(pixels per inch)
- dpi(dots per inch)
- dpr(device pixels ratio)
- dip(device independent pixel)
读本文你需要掌握哪些基本知识：
- 1in(英寸) == 2.5399999961392cm
- 常常用1英寸等于2.54厘米
- 1m == 3尺
- 1尺 == 10寸
- 1寸 == 3.33333333cm
- iphone6屏幕4.7寸是指屏幕对角长度为4.7英寸
- iphone6的高宽比为 iphone6_height : iphone6_width = 16 : 9
2、dp(设备像素)
2.1、说明
dp是设备像素，也叫物理像素，顾名思义，他就是指一个物理发光点的单位。
iphone6官方在产品说明书上写的屏幕分辨率为1334x750像素指的是物理分辨率。
也就是高1334dp，宽750dp。
3、px(逻辑像素)
3.1、说明：
px是逻辑像素，逻辑像素是相对的单位。
在每个设备上对应的dp是不一样的是不一样的，在相同设备上对应的dp也可以不同。
这就是为什么我我们的图片可以放大缩小的原因。
4、pt(点)
4.1、说明
pt是专用的印刷单位“点”，这个单位是绝对单位.
1pt == 1/72in
5、ppi(每英寸的像素)
5.1、说明
ppi指的是单位英寸长度上的平均孔数
iphone6官方在产品说明书上写像素密度为326ppi，指的就是在它的1in == 326dp
5.2、计算iphone6的像素密度
先通过iphone6的对角4.7in和高宽比可以算出高和宽：
iphone6_width = 2.304227826273027in = 2.3in
iphone6_height = 4.096405024485382in =4.1in
再然后通过这个宽高和屏幕物理分辨率可以算出ppi
iphone6_width_ppi = 750dp/2.3in = 326.0869565217391ppi
iphone6_height_ppi = 1334dp/4.1in = 325.3658536585366ppi
可以得出宽和高都是非常近似的等于326dp的
6、dpi(每英寸的点数)
6.1、说明
dpi是输出设备的物理能力
例如：300DPI的油墨打印机是指每英寸有300墨滴用于打印机，每英吋能印出的点的数目为300。
“像素”（p）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。
6.2、注意
在显示器中ppi和dpi是同一概念
7、dpr(devicePixelRatio)
7、1说明
window.devicePixelRatio是设备上物理像素和逻辑像素的比例。
dpr不是单位，是一个属性，在浏览器中通过 window.devicePixelRatio 获取屏幕的DPR。
在用微信开发者工具开发小程序的时候，在切换模拟器的时候可以看到各个设备的dpr，iphone6的设备dpr为2
8、dip(设备独立像素)
8、1说明
是由谷歌推出用来适配各个安卓屏幕差异的。
在定义UI布局时，应该使用一个虚拟像素单元，以一种密度独立的方式表示布局维度或位置。
密度无关的像素相当于一个物理像素在160 dpi屏幕上，这是系统为“中等”密度屏幕所假设的基线密度。
在运行时，系统会根据实际的屏幕密度，透明地处理dp单元的任何扩展。将dp单元转换为屏幕像素很简单：px=dp（dpi/160）。
例如，在240 dpi屏幕上，1 dp等于1。5物理像素。在定义应用程序的UI时，应该始终使用dp单元，以确保在具有不同密度的屏幕上正确显示UI。
就是说在160dpi的屏幕上，1dip=1px。
它跟屏幕密度有关，如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px。
9、彩蛋
9.1、viewport
viewport是用户网页的可是窗口。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
9.2、实例代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
具体值含义可以参考我之前写的你绝对不知道的head标签