做了一张足够大分辨率的图，要截取指定的图片位置就需要设置background-size，公示如下：
参考资料：
https://www.w3cplus.com/css/css-background-size-graphics.html
https://segmentfault.com/a/1190000004350120
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值
高分辨率头像宽度=原图的那个头像宽度
目标像素宽度为指定的width和height，即x
原图sprites图像宽度：等于原图的宽度/x=宽度，即background-size:宽度,auto
参考资料：https://www.jianshu.com/p/6b1f94bfa263
物理像素（设备像素，也就是显示器的真实像素，每个像素大小是屏幕固定的属性，设备分辨率就是说这个显示器宽高分别是多少个设备像素），浏览器不关心物理像素。
设备独立像素(dips)也就是逻辑分辨率，浏览器只需要知道逻辑分辨率就可以了。用设备独立像素定义的尺寸，不管屏幕参数如何，都能以合适的大小显示，将多个设备像素划分为一个逻辑像素是操作系统决定。
举个例子：
设备屏幕分辨率是1920x1200，逻辑分辨率设置是1280x800
那么表示：纵横方向的设备像素数量恰好是像素独立设备的1.5倍。这也表示设备独立像素的。
css像素是什么？
当我们缩放页面的时候，css的像素数量不会少，改变的只是每个css像素的大小，我们在css里面用的都是css像素
举个例子：
width:128px;，当我们页面缩放到200%的时候，宽度依然是128个css像素，只是每个css像素的宽高变成原来的两倍。
如果原本宽度为128个设备独立像素，当页面缩放到200%的时候，元素宽度为256个设备独立像素（css像素始终是128）
在缩放100%的时候，1个css像素大小等于一个设备独立像素
css像素和设备像素的关系：
devicePixelRatio=设备上物理像素/设备独立像素=设备像素比
devicePixelRatio=在相同长度的直线上，设备像素的数量/css像素的数量，如果devicePixelRatio=2,,表示设备像素是css像素数量的2倍，也就是2个设备像素=一个css像素，也可以说是css像素的边长是设备像素的2倍
通过学习，我们明白了设置css像素也就是设置独立设备像素，因为devicePixelRatio的不同，我们设置1px实际上是好几个物理像素的单位。
参考资料：http://blog.163.com/angelina_wu/blog/static/251891024201602223515175/
像素密度跟像素比没有直接关系，像素密度越高，设备屏幕中的图像越清晰
Retina：视网膜屏幕，本质上也就是1个设备像素=多少个物理像素