1.第一种方法 通过 css 的 DevicePixelRatio 媒体查询属性:
/*默认大小*/
.photo {
background-image: url(image100.png);
background-size: 100px 100px;
}
/* 如果设备像素大于等于2,则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.photo {
background-image: url(image200.png);
}
}
/* 如果设备像素大于等于3,则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
.photo {
background-image: url(image300.png);
}
}
3.第二种方法也是推荐的方法,通过img标签属性动态切换url:
< img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
浏览器会通过 srcset 属性来自动选择2X,3X图,比如用 iPhone 6s Plus,就会自动选择3x 的图像。