移动端图片模糊问题

该文章由 leevare 发布于 ,归类于 HTML/CSS

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

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

在不同的屏幕上,它们的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);
  }
}

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒