响应式图片

使用srcset + sizes + w标识符实现响应式图片 (opens new window)

一、固定宽度图片

设备像素比（devicePixelRatio）

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是：window.devicePixelRatio = 物理像素 / dips

设备独立像素（Device independent Pixel） 设备独立像素，也称为逻辑像素，简称dip。 CSS像素 =设备独立像素 = 逻辑像素

<img src="200px.png" srcset="400px.png 2x, 600px.png 3x, 800px.png 4x">

三、关于像素

• PX(CSS pixels)：虚拟像素，CSS和JS使用的抽象单位。 相对单位，相对的是设备像素(device pixel)。

不同的设备，图像基本采样单元是不同的，显示器上的物理像素等于显示器的点距，而打印机的物理像素等于打印机的墨点。而衡量点距大小和打印机墨点大小的单位分别称为ppi和dpi： ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。 dpi：每英寸多少点。

• DP(device pixels)：物理像素 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。

设备像素(DP)与CSS像素之间的关系

DPR = 设备像素/CSS像素

• DPR(device pixels ratio)

设备像素比（dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系，计算方法如下图。

设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如2代表1个css像素用2x2个设备像素来绘制。 设备像素比(dpr)，公式为1px = (dpr)^2 * 1dp，可以理解为1px由多少个设备像素组成；

• PPI(pixels per inch) 像素密度 每英寸的像素点（设备像素），已知屏幕分辨率和主对角线的尺寸，则ppi等于 以爱疯6为例：

var 斜边尺寸 = V(1920^2+1080^2) V代表开根号 
var ppi = 斜边尺寸/5.5 
ppi = 401ppi

https://camo.githubusercontent.com/9233a97781fccdd468aba79b8944619cc9918b63/68747470733a2f2f7773312e73696e61696d672e636e2f6c617267652f303036744e6252776779316667386a7030653035316a3330737730376f6a73612e6a7067

分辨率说的是块屏幕的像素尺寸

参考资料

• CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport (opens new window)