px和dp（内含大量的像素单位详解）

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标签