1.第一种方法 通过 css 的 DevicePixelRatio 媒体查询属性:
/*默认大小*/
.photo {background-image: url(image100.png);}
/* 如果设备像素大于等于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);
background-size: 100px 100px;
}
}
/* 如果设备像素大于等于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);
background-size: 100px 100px;
}
}
.photo {width:100px;height:100px;}
2.第二种方法通过 scss 的mixin动态修改背景图片,判断设备dpr:
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}
.div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
//在这里相当于调用了上面媒体查询的方法 ,传入图片url
@include bg-image('special_1');
}
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 的图像。存在兼容性问题