css4中响应式图片-CSDN博客

本文链接：https://blog.csdn.net/hu_mouse/article/details/46804681

本文介绍了如何使用-webkit-min-device-pixel-ratio属性来针对不同像素密度的屏幕进行响应式图片设置，包括非Retina屏幕和Retina高清屏的区别处理方法，并提供了具体的CSS代码示例。

摘要由CSDN通过智能技术生成

-webkit-min-device-pixel-ratio常见值对照表

响应式图片可以这样

background-image:url(default.jpg); /* 普通幕 */

background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */

background-image:url(1.png);

background-image:-webkit-image-set(url() 1x,url() 2x,);

-webkit-min-device-pixel-ratio为1.0

所有非Retina的Mac
所有非Retina的iOS设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3

Google Nexus 7

-webkit-min-device-pixel-ratio为1.5

Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-webkit-min-device-pixel-ratio为2.0

iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

span.location {
  background: url(location.png) no-repeat 0 0;
}

span.success {
  background: url(success.png) no-repeat 0 0;
} 

a.delete {
  background: url(delete.png) no-repeat 0 -100px;
} 

.content a.fav-link {
  background: url(favorite.png) no-repeat 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
  span.location {
    background-image: url(location@2x.png);
    background-size: 16px 14px;
  }

  span.success {
    background-image: url(success@2x.png);
    background-size: 13px 14px;
  }

  a.delete {
    background: url(delete@2x.png) no-repeat 0 -100px;
  } 

.content a.fav-link {
  background-image: url(favorite@2x.png);
  background-size: 11px 13px;
  }
}

span.location {
  background: url(sprite.png) no-repeat 0 0;
}

span.success {
  background: url(sprite.png) no-repeat -100px 0;
} 

a.delete {
  background: url(sprite.png) no-repeat -100px -100px;
} 

.content a.fav-link {
  background: url(sprite.png) no-repeat 0 -100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
  span.location,
  span.success,
  a.delete,
  .content a.fav-link {
    /* Reference the @2x Sprite */
    background-image: url(sprite@2x.png);
    /* Translate the @2x sprite's dimensions back to 1x */
    background-size: 200px 200px; 
  }
}