移動(dòng)端開(kāi)發(fā)過(guò)程中，因?yàn)槭謾C(jī)的dpr(設(shè)備像素比不同)鹊奖，需要根據(jù)dpr來(lái)修改圖標(biāo)的大小吠裆，判斷使用@2x 圖 還是 @3x 圖，解決高清的適配够掠。
1.css3的 -webkit-min-device-pixel-ratio屬性民褂，@media媒體查詢（只能用于背景圖片）
/*less，sass這類(lèi)css預(yù)處理語(yǔ)言中的混合疯潭，可以理解成自定義了一段代碼赊堪，后面可以用@include調(diào)用*/
@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");
}
}
/*用@include調(diào)用*/
div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
@include bg-image('../../../../static/image/map_loading');
}
2.JavaScript的解決方案
使用js對(duì)“window.devicePixelRatio”進(jìn)行判斷，然后根據(jù)對(duì)應(yīng)的值給Retina屏幕選擇圖像竖哩。
$(document).ready(function(){
if (window.devicePixelRatio > 1) {
var lowresImages = $('img');
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@2x.");
$(this).attr('src', highres);
});
}
});
相關(guān)知識(shí)點(diǎn)
理解css中@mixin：
less哭廉，sass這類(lèi)css預(yù)處理語(yǔ)言中的混合，可以理解成自定義了一段代碼期丰，后面可以用@include調(diào)用群叶，如設(shè)置一個(gè)有默認(rèn)寬高的mixin（不帶參數(shù)的類(lèi)似）
//scss
@mixin box-size($width:100px,$height:100px) {
width: $width;
height: $height;
}
.demo{
@include box-size;
}
.demo2{
@include box-size(200px,300px);
}
編譯之后就是
/*css*/
.demo{
width: 100px;
height: 100px;
}
.demo2{
width: 200px;
height: 300px;
}
