移动端 高清图

原因

移动端 设备不同 dpi(设备像素比) 值也不同 造成对图片的要求不一样
补充一篇像素比的文档 http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

实现方法

• meta
  • 缺点是 网速不好的时候 体验差点

.back{
    height:51px;
    width:51px;
    background:url('wechat.png') no-repeat center;
    background-size:100%;
      }
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .back{
       background:url('wechat@2x.png') no-repeat;
       background-size:100%;
       }

}

/* 当dpr为3时候也就是iphone6plus 是的时候加载这个图片  */
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .back{
       background:url('wechat@3x.png') no-repeat;
       background-size:100%;
     }
}

转载于:https://www.cnblogs.com/wangxiaoQie/p/6702086.html