移动端图片模糊问题

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

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

在不同的屏幕上,它们的dpr是不一样的,可以根据dpr的值来展示不同的效果,所以要准备几种不同分辨率的图片。例如,当dpr2时,使用 2 倍图,当dpr3时展示 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);
  }
}
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。