二倍图css,css二倍图的使用

使用 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;}

scss写法

@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")

}

}

css样式中调用 bg-image 方法

div{

width:30px;

height:20px;

background-size:30px 20px;

background-repeat:no-repeat;

@include bg-image('special_1');

}

方法二:直接使用 IMG 的 SRCSET 属性