几种解决移动端图片模糊问题的方案

为了保证图片质量,我们应该尽可能让一个屏幕像素来渲染一个图片像素,所以,针对不同 DPR的屏幕,我们需要展示不同分辨率的图片。

1、media查询

使用 media查询判断不同的设备像素比来显示不同精度的图片:

.avatar{
    background-image: url(conardLi_1x.png);
}        
@media only screen and (-webkit-min-device-pixel-ratio:2){
     .avatar{
          background-image: url(conardLi_2x.png);
      }
}        
@media only screen and (-webkit-min-device-pixel-ratio:3){
     .avatar{
          background-image: url(conardLi_3x.png);
     }
}

此方案只适用于背景图

 

2、image-set

.avatar {
    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x);
}

此方案只适用于背景图

 

3、srcset

使用 img标签的 srcset属性,浏览器会自动根据像素密度匹配最佳显示图片:

<img src="conardLi_1x.png"  srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">

 

4、JavaScript拼接图片url

使用 window.devicePixelRatio获取设备像素比,遍历所有图片,替换图片地址:

const dpr = window.devicePixelRatio;

const images =  document.querySelectorAll(‘img‘);

images.forEach((img)=>{
  img.src.replace(".", ‘@${dpr}x.’); 
})

 

几种解决移动端图片模糊问题的方案

上一篇:Call to undefined method app\models\User::find() yii2-admin


下一篇:Android和Linux的关系