移动端 高清图

原因

移动端 设备不同 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%;
	 }
}