Css-自适应加载多倍图

场景：

在移动端展示图片时，由于设备的物理像素比不同，导致同一张图片在不同设备中展示的清晰度不同。物理像素比越高，在同样大小的屏幕上显示的像素点越密集，所能表现的细节就越丰富，图像也就更加清晰锐利。
因此项目开发过程中，同一张图片会提供一套多倍图，包括一倍图、二倍图、三倍图，通过使用多倍图从而提高图片质量，解决高清设备中的模糊问题。

---

获取设备物理像素比：

1. 使用javascript 中的 window.devicePixelRatio
2. 使用媒体查询的 -webkit-min-device-pixel-ratio

---

方案：

使用时，只需调用.bg-xxx-img(图片名)即可。其中需将多倍图命名为a.png、[email protected]、[email protected]。或者也可以此类推，重新定义命名规范。

.bg-png-img(@name){
    
    
	background-image: url("路径/@{name}.png")
	@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) {
    
    
		background-image: url("路径/@{name}@2x.png")
	}
	@media (min-device-pixel-ratio: 3),(-webkit-min-device-pixel-ratio: 3) {
    
    
		background-image: url("路径/@{name}@3x.png")
	}
}
.bg-jpg-img(@name){
    
    
	background-image: url("路径/@{name}.jpg")
	@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) {
    
    
		background-image: url("路径/@{name}@2x.jpg")
	}
	@media (min-device-pixel-ratio: 3),(-webkit-min-device-pixel-ratio: 3) {
    
    
		background-image: url("路径/@{name}@3x.jpg")
	}
}