像素

像素，又称画素，是图像显示的基本单位，译自英文“pixel”。

pix是picture的常用简写，加上“元素”element，就得到 pixel，故“像素”表示“图像元素”之意；
有时亦被称为 pel(picture element)。

像素是网页布局的基础，它是一个相对长度单位，一个像素就是计算机能够显示一种特定颜色的最小区域。

当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。

以iphone3s和iphone4为例，二者屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。

屏幕像素密度  PPI 或 DPI

屏幕像素密度（PPI）是指屏幕上每英寸可以显示的像素点的数量。

[1] 屏幕尺寸    // 出厂就设定好的

屏幕尺寸，是出厂就设定好的，我们常听说 5.5 英寸大屏幕手机。所谓屏幕尺寸，就是屏幕的对角线长度（单位：英寸）。

常见的屏幕尺寸有：3.5、4、4.3、4.8、5.0、5.2、5.5、6.0等。

对于英寸没有什么概念，可通过公式转换成常用的厘米：1 英寸 = 2.54 厘米。SO，
    3.5in = 3.5*2.54cm = 8.89cm
    4.0in = 4.0*2.54cm = 10.16cm
    4.3in = 4.3*2.54cm = 10.922cm
    4.8in = 4.8*2.54cm = 12.192cm
    5.0in = 5.0*2.54cm = 12.7cm
    5.2in = 5.2*2.54cm = 13.208cm
    5.5in = 5.5*2.54cm = 13.97cm
    6.0in = 6.0*2.54cm = 15.24cm

[2] 屏幕分辨率

屏幕分辨率，也是出厂就设定的，指的是指屏幕的像素点数（设备像素或物理像素），一般以纵向像素 * 横向像素来表示。

显示常用分辨率有：800*600、1024*768、1280*720、1600*900、1920*1080，单位是px。

[3] 屏幕像素密度（ PPI 或 DPI ）    

DPI（Dots Per Inch）是印刷行业中用来度量空间点密度用的，这个值是打印机每英寸可以喷的墨汁点数。
计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的原子单位不是墨汁点而是像素，所以
就创造了PPI（Pixels Per Inch），这个值是屏幕每英寸的像素数量，即像素密度（Screen density）。
由于各种原因，目前PPI(主要是iOS)和DPI(比如在Android中)都会用在计算机显示设备的参数描述中，不
过二者的意思是一样的，都是代表屏幕像素密度。

屏幕像素密度 = 对角线分辨率 / 屏幕尺寸

      对角线的分辨率 = √(1920²+1080²)≈2203
对角线分辨率除以屏幕尺寸：2203/5≈440dpi

[ 关于 DPI / PPI 不同的区分标准 ]

1. Google官方指定按照下列标准区分不同设备的dpi。

2. Apple 的区分则更为简单：非高清屏、高清屏、超高清屏

从数值上看，苹果和安卓有这样的对应关系：

设备像素比 DPR = 设备像素 / CSS像素（某一方向上）

关于像素，实际上分为两种：一种是组成屏幕分辨率的设备像素（ 屏幕设备的物理像素），它是设备出厂就设定好的，任何设备的物理像素的数量都是固定的。而，另一种像素则是 — CSS像素，又称为逻辑像素。

CSS像素是为web开发者创造的，在 CSS 和 JS 中使用的一个抽象的层。几乎每个每一个CSS声明和几乎所有的JS属性都使用CSS像素，唯一的例外是 screen.width/height。也就是说，我们通过CSS和javascript代码设置的像素通常都是CSS像素。

[ 缩放现象 ] 在PC端，1个CSS像素往往对应着屏幕的1个物理像素，即：一个CSS像素完全覆盖了一个设备像素。

而在手机端，由于屏幕尺寸的限制，缩放是经常性的操作。      // 设备像素（深蓝色）、CSS像素（半透明）

• 左图：当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素。
• 右图：当用户进行放大操作时，一个CSS像素覆盖了多个设备像素。

不论我们进行缩小或放大操作，元素设置的CSS像素（ 如width:300px ）是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的，这便是设备像素比（DPR）的由来。

        

[ 设备像素比 DPR ]  指的是，默认缩放为100%的情况下，设备像素和CSS像素的比值。

DPR = 设备像素 / CSS像素（某一方向上）

在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。
从iphone4开始，苹果公司推出了所谓的retina视网膜屏幕。
之所以叫做视网膜屏幕，是因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。
iphone4的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是DPR = 2。

实际上，此时的CSS像素对应着理想视口，其对应的JS属性是 screen.width/screen.height。
而对于设备像素比DPR也有对应的JS属性 window.devicePixelRatio。

[ 拓展理解：Retina视网膜屏幕 ]

像素密度 DPI，连接数字世界与物理世界的桥梁。像素密度越高，代表屏幕显示效果越精细。

Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

以iPhone 3gs和4s来举例：假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。

3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽；但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。

在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用，画质更清晰。

由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。

实际像素 / 倍率 = CSS像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

[ 拓展理解：倍率 ]

密度决定比例：我们计算PPI就是为了知道一部手机设备是属于哪个密度区间的，因为不同的密度区间，对应着不同的默认缩放比例，这是一个很重要的概念。从倍率 - 虚拟单位 的角度解释，这是因为iphone4s上采用了新的虚拟单位pt，1pt=2px。开发者不需要做什么大改变，只需要把单位从px改为pt，就完美的解决了这个问题。

pt是一个绝对单位；全称为point，正确的说法是一个专用的印刷单位“点”。 
   
1点=0.376毫米=1.07英美点=0.0148英尺=0.1776英寸

android也同样引入了新的虚拟单位，叫dp，虽然和ios的叫法不一样但本质是一样的，所以ios的pt和android的dp就是px和像素密度之间的桥梁。我们知道了屏幕的像素密度，知道了ios和android的虚拟单位，那现在就可以愉快的换算了。

目前，屏幕按密度分为6种，每个密度都有相对应的密度值和分辨率， ios和Android系统已经把屏幕密度划分好了，会根据手机屏幕的分辨率自动划分到相应的屏幕密度里面，我们只需要知道分辨率既可以知道属于那个屏幕密度。

蓝色的 mdpi 中密度一列，在mdpi 下：1px＝1pt＝1dp。为什么在中密度下1px＝1pt＝1dp？

因为iphone和android第一台手机都是直接用px作为开发单位的，之后的设备都是在这个基础上发展起来，所以apple和google定义他们成为标准。其实我们也不必深究为什么，只需知道即可。

实际开发中，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。

最下面一行红色的倍率，以mdpi 中密度的密度值为基数，可以算出各屏幕密度值的倍率是0.75：1：1.5：2：3：4。

根据中密度下：1px＝1pt＝1dp，那即可方便的计算出其它密度下的换算比例，例如在xxhdip下，1pt(dp)=3px。

那1080px的宽度就等于360 pt(dp)，给不同范围的屏幕定义不同的倍率，就可以保证显示效果相近。

不过需要注意的是，Android设备的逻辑像素尺寸并不统一。
比如两种常见的屏幕480×800和1080×1920，它们分别属于hdpi和 xxhdpi。
除以各自倍率1.5倍和3倍，得到逻辑像素为320×533和360×640。很显然，后者更宽更高，能显示更多内容。
所以，即使有倍率的 存在，各种Android设备的显示效果仍然无法做到完全一致。