移动端多倍图

移动端多倍图

先知：pc端默认一个css像素对应一个物理像素；

　　　移动设备中，css像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素的长度是不同的。

 

问题：对于一张50*50px的图片，在手机retina屏中打开，按照手机的像素比，图片会进行倍数放大，造成图片模糊。

解决方法：

1. 假设我们需要一个50*50像素（css像素）的图片，直接放到iPhone8里面按照像素比，图片会进行放大，造成图片模糊。
2. 我们采取放一个100*100的图片，然后手动把这个图片缩小为50*50（css像素）。
3. 我们准备的图片比实际需要的大小大2倍，这种方式就是2倍图。

总结：需要50*50px,放100*100的图片，手动缩小为50*50px。（2倍图）

 /**
  *在iPhone 6/7/8下
  */
    img {
        /*原始图片100px*100px*/
        width: 50px;
        height: 50px;
    }

    .box {
        /*原始图片100px*100px*/
        background-size: 50px 50px;
    }

 css属性：

　　background-size:图片的宽度 图片的高度

• 只写一个参数，肯定是宽度，高度省略了，会等比例缩放；
• 里面的单位可以跟%，相对与父盒子来说的；
• cover 会等比例拉伸，要完全覆盖父盒子，可能有部分背景图片显示不全；
• contain 高度和宽度等比例拉伸，当宽度或者高度铺满父盒子就不再进行拉伸了，可能存在部分空白区域。