从像素说起(二)：移动前端布局之CSS devicePixelRatio

第一篇在这里：CSS中的分辨率，像素(dpi,ppi,物理像素，独立像素，参考像素)，devicePixelRatio/density换算，与视窗viewport（一） ,主要讲了分辨率和像素的不同概念和区别。

这篇的index：

1.像素和分辨率的概念整理
2.what exactly is devicePixelRatio?
3.density的含义
4.example：mediaquery设置不同质量的图片
markdown.text

---

正文这里开始

1.像素、分辨率概念整理

这些概念较为混乱，有的来回混用，注意上下文语境。

• css中的像素=reference pixel参考像素=device independent pixel(dip)设备独立像素/设备无关像素=logical pixel逻辑像素：绝对单位，为0.0213°的视角。此时1PX对应1/96英寸，即0.26mm。用于移动端和传统pc的web开发
  （ The CSS “pixel” is not even defined as “one picture element on some screen”, but rather as a non-linear angular measurement of 0.0213° viewing angle, which is approximately 1/96 of an inch at arm’s length.）
• 物理像素physical pixel=device pixel：相对分辨率可换算的单位，对不同的DEVICE可以不同，也是安卓程序开发中所用的px
• 屏幕像素密度=ppi/dpi（单位）=device pixels：设备像素的单位即ppi/dpi，也被当作分辨率用，
• 屏幕分辨率：移动端开发中多指横纵向上的像素点数，单位是px，1px=1个像素点。屏幕对角线分辨率（用勾股定理算）/屏幕尺寸=屏幕像素密度=xxx ppi。尺寸相同的屏幕，以同样的PX面积画一个图形，分辨率高的屏幕上图形面积较小（像素密度更大）。

2.what exactly is devicePixelRatio?

devicepixelratio
= 设备像素/ 设备独立像素dips
= 物理像素（分辨率）/逻辑像素（分辨率）
= 图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = virtual pixel/actual pixel

For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

Physical resolution: 960 x 640
Logical resolution: 480 x 320

上例无误。
但我见到有些文章里写
“例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。”
这里是微观单位大小的概念，而不是分辨率的概念。
以iPhone4为例，在垂直状态下手机的物理像素宽度有640px，但是因为2:1缩放的关系，此时的dip，设备报告给我们的宽度只是320px。 此时的DevicePixelRatio就为 640 / 320 = 2;如果手动缩放了，这个值会发生改变。（这段是转的，http://www.cnblogs.com/hubing/p/4565836.html）

3. density的含义，与devicepixelratio的换算

参考来源：http://blog.csdn.net/dinko321/article/details/7992776

另一个定义：设备独立像素Density-independent
pixel (dip或叫作dp)：一个设备独立像素相当于一个160 dpi屏幕上的1px物理像素。android默认的3个dpi: low、medium和high，对应 120、160、240, 160=default
px = dp * (dpi / 160)或者px=dip*(dpi/160)
从概念上理解，数值上density=dpi/160=Devicepixelratio

另外可以看http://www.uigreat.com/article/1 DPI、 PPI的换算，译者是个东北人吧。。。

使用media query用不同质量的图片

要让位图图像适应许多不同的设备，可使用CSS媒体查询为不同的设备提供不同的资源集。 结合background-size: cover 或指定background-size到某一个百分值。
Example

#element { background-image: url('lores.png'); }
@media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
@media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}

这样，每种设备类型只加载正确的映像资源。 还要记住，CSS中的px单位总是对逻辑像素操作。
参考来源：http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio