HTML5 响应式图片

现在上网设备越来越多，各种设备的屏幕千差万别，如果只用一张图片去涵盖所有的设备，一是可能会造成某些设备上显示效果不佳，比如使用了一张低清晰度的图，而网页运行在一个高清大屏里；二是可能会浪费带宽，比如使用了一张超大图，而网页运行在小屏幕手机里。在很多情况下我们希望浏览器能根据具体的运行环境去选择最合适的图片来加载，这便是响应式图片。

一睹为快，可以克隆示例项目到本地运行查看

基于设备像素比（DPR）加载图片

设备像素比是指物理像素和逻辑像素（或CSS像素、设备独立像素）之间的比率，比如三个物理像素对应一个逻辑像素，那么设备像素比就是3：1。

不同的设备有不同的设备像素比。比如IPhone 6的DPR是2.0，Galaxy S5的DPR是3.0。设备像素比越高，显示效果就越高清，相应的对图片的分辨率要求也就更高。因此就出现了一个需求：希望高DPR的设备下载高清图，这样就不会出现模糊，低DPR的设备下载低清图，这样更节省带宽。

<img>标签的srcset属性并使用x描述符可以实现这个功能：

<img src="pic.jpg" srcset="pic-hd.jpg 2x,pic-sd.jpg 3x&