移动端图片模糊问题

在移动端，某些手机上展示图片会发现模糊的情况，具体原因可能是分辨率导致的，比如在高分辨率的手机上展示了低分辨率的图片，就会产生这种问题。

为了能够在不同分辨率的手机中展示出一样的图片效果，则需要根据不同的分辨率来展示不同的图片，这里使用媒体查询来适配。

在不同的屏幕上，它们的dpr是不一样的，可以根据dpr的值来展示不同的效果，所以要准备几种不同分辨率的图片。例如，当dpr为2时，使用 2 倍图，当dpr为3时展示 3 倍图。

.bg {
  background-image: url(bg_@1x.jpg);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .bg {
    background-image: url(bg_@2x.jpg);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .bg {
    background-image: url(bg_@3x.jpg);
  }
}