如何使用imageset適配移動端高清屏圖片

NO IMAGE

一、注意注意注意!

什麼dpr、css像素、設備像素,這裡是沒有的,網上太多講解了,都很好,這裡不廢話,建議是先查找相關資料瞭解再看本文章。

該圖片適配方案是基於vw單位適配方案的,具體如何用vw進行適配,網上也很多,出名的就是大漠那篇文章,我也不在這裡抄送了。

二、為什麼需要適配圖片

現在手機機型繁雜,比如iphone的機型一般就是dpr=2的4.7寸屏幕機型與dpr=3的5.5寸plus(比如iphone6s與iphone6s plus),安卓的dpr就比較不可描述了,2.x,3.x這種有小數的dpr也是隨處可見。

而對於不同dpr的機型呢,ui大佬一般會給我們切一套2倍率和3倍率的圖,用於適配iphone的兩種不同dpr的機型

如何使用imageset適配移動端高清屏圖片

這時候我想說一句:管他什麼dpr!!!老子抄起3倍率的圖就是一頓幹!!!

如何使用imageset適配移動端高清屏圖片

冷靜…冷靜…

從上圖可以看出,不同倍率的圖片,直接導致的就是體積大小,3倍率的圖片大小幾乎是2倍率圖片大小的一倍,我們如果直接用3倍率圖的話就會導致dpr較低的機器白花了流量和時間去下載一個較大的圖片,這很顯然是不科學的,但是如果我們僅僅用2倍率圖,dpr=3的機型就會顯得有點模糊。(別跟我說dpr為1的機型,照現在手機硬件的發展速度,我想應該很快就會沒有的了)

那麼問題來了,我們前端可以如何去像客戶端一樣去對不同dpr屏幕的機型做適配呢?

三、使用image-set適配方案

目前這個css屬性的支持度如下

如何使用imageset適配移動端高清屏圖片

如何使用imageset適配移動端高清屏圖片

這裡我們看看IOS與安卓的兼容度,IOS在8以上與安卓4.4以上都已經兼容了這個css屬性了,當然下面我們會給出不兼容這個屬性的方案。

我們來看個例子先

.img {
    /* 兼容不支持image-set的webview */
    background-image: url('../imgs/@2x/[email protected]');
    
    /* 這裡可以使用autoprefixer等postcss插件給image-set添加兼容前綴,這裡就不加了 */
    background-image: image-set(
        url('./imgs/@2x/[email protected]') 2x,
        url('./imgs/@3x/[email protected]') 3x
    );
}

我們打開chrome看一看這樣設置有什麼效果

iphone6/7/8 (dpr=2):

如何使用imageset適配移動端高清屏圖片

iphone6/7/8 plus (dpr=3):

如何使用imageset適配移動端高清屏圖片

對!就是這麼神奇!讓瀏覽器根據dpr自動選擇獲取哪種倍率的圖片,那如果我們的瀏覽器不支持這個屬性怎麼辦?這裡隨便找edge測測吧,實在沒有版本低的手機

如何使用imageset適配移動端高清屏圖片

圖中含有image-set屬性的背景設置出現了紅色波浪線,因為edge不支持這個屬性,所以瀏覽器使用了2x倍率圖。這裡默認使用2倍圖是考慮到不支持這個屬性的機型一般是老舊機型dpr較低,所以使用2倍圖足以。

那對於安卓的各種小數dpr呢?當然也可以使用,但是我們不會針對性得對安卓進行正確dpr的設置(畢竟太繁雜了),而是依然是用2與3倍率的圖片讓瀏覽器根據這個屬性對安卓的機型進行模糊匹配,比如dpr=3.5的Pixel2 XL,則會匹配到3x倍率的圖片。當然其實你也可以根據dpi細緻得去匹配機型,image-set支持根據dpi範圍去匹配。

四、使用postcss插件處理

其實postcss真的是個好東西,完全可以自己寫一個插件根據註釋然後自動添加image-set的配置,當然前提是ui大佬給你切的圖需要約定一下格式與路徑的問題,比如:

input:
.test-file {
    background-image: url('../imgs/[email protected]'); /* 3x */
}

output:
.test-file {
    background-image: url('../imgs/[email protected]');
    background-image: image-set(
        url('../imgs/pho[email protected]') 2x,
        url('../imgs/[email protected]') 3x
    );
}

我自己是寫了一個這樣的插件postcss-auto-set-imageset…大家可以按照自身需求參考一下自己寫一個。

相關文章

Angular與AngularJS概念區分

如何理解async/await

使用postcsswritesvg在retina屏繪製1px細線

webpack4搭建現代Hybirdh5工程