欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解如何使用image-set適配移動(dòng)端高清屏圖片

  發(fā)布時(shí)間:2018-08-14 15:25:15   作者:bug給我滾   我要評(píng)論
這篇文章主要介紹了詳解如何使用image-set適配移動(dòng)端高清屏圖片的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、注意注意注意!

什么dpr、css像素、設(shè)備像素,這里是沒(méi)有的,網(wǎng)上太多講解了,都很好,這里不廢話,建議是先查找相關(guān)資料了解再看本文章。

該圖片適配方案是基于vw單位適配方案的,具體如何用vw進(jìn)行適配,網(wǎng)上也很多,出名的就是大漠那篇文章,我也不在這里抄送了。

二、為什么需要適配圖片

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

而對(duì)于不同dpr的機(jī)型呢,ui大佬一般會(huì)給我們切一套2倍率和3倍率的圖,用于適配iphone的兩種不同dpr的機(jī)型

這時(shí)候我想說(shuō)一句:管他什么dpr!??!老子抄起3倍率的圖就是一頓干!??!

冷靜...冷靜...

從上圖可以看出,不同倍率的圖片,直接導(dǎo)致的就是體積大小,3倍率的圖片大小幾乎是2倍率圖片大小的一倍,我們?nèi)绻苯佑?倍率圖的話就會(huì)導(dǎo)致dpr較低的機(jī)器白花了流量和時(shí)間去下載一個(gè)較大的圖片,這很顯然是不科學(xué)的,但是如果我們僅僅用2倍率圖,dpr=3的機(jī)型就會(huì)顯得有點(diǎn)模糊。(別跟我說(shuō)dpr為1的機(jī)型,照現(xiàn)在手機(jī)硬件的發(fā)展速度,我想應(yīng)該很快就會(huì)沒(méi)有的了)

那么問(wèn)題來(lái)了,我們前端可以如何去像客戶端一樣去對(duì)不同dpr屏幕的機(jī)型做適配呢?

三、使用image-set適配方案

目前這個(gè)css屬性的支持度如下

 

這里我們看看IOS與安卓的兼容度,IOS在8以上與安卓4.4以上都已經(jīng)兼容了這個(gè)css屬性了,當(dāng)然下面我們會(huì)給出不兼容這個(gè)屬性的方案。

我們來(lái)看個(gè)例子先

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

我們打開(kāi)chrome看一看這樣設(shè)置有什么效果

iphone6/7/8 (dpr=2):

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

對(duì)!就是這么神奇!讓瀏覽器根據(jù)dpr自動(dòng)選擇獲取哪種倍率的圖片,那如果我們的瀏覽器不支持這個(gè)屬性怎么辦?這里隨便找edge測(cè)測(cè)吧,實(shí)在沒(méi)有版本低的手機(jī)

圖中含有image-set屬性的背景設(shè)置出現(xiàn)了紅色波浪線,因?yàn)閑dge不支持這個(gè)屬性,所以瀏覽器使用了2x倍率圖。這里默認(rèn)使用2倍圖是考慮到不支持這個(gè)屬性的機(jī)型一般是老舊機(jī)型dpr較低,所以使用2倍圖足以。

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

四、使用postcss插件處理

其實(shí)postcss真的是個(gè)好東西,完全可以自己寫一個(gè)插件根據(jù)注釋然后自動(dòng)添加image-set的配置,當(dāng)然前提是ui大佬給你切的圖需要約定一下格式與路徑的問(wèn)題,比如:

input:
.test-file {
    background-image: url('../imgs/photo@2x.png'); /* 3x */
}

output:
.test-file {
    background-image: url('../imgs/photo@2x.png');
    background-image: image-set(
        url('../imgs/photo@2x.png') 2x,
        url('../imgs/photo@3x.png') 3x
    );
}

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Html5移動(dòng)端適配IphoneX等機(jī)型的方法

    這篇文章主要介紹了Html5移動(dòng)端適配IphoneX等機(jī)型的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起
    2019-06-25
  • rem適配移動(dòng)設(shè)備的方法示例

    這篇文章主要介紹了rem適配移動(dòng)設(shè)備的方法示例的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-04-25
  • 淺談移動(dòng)端適配大法

    這篇文章主要介紹了淺談移動(dòng)端適配大法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-05
  • 移動(dòng) web 端屏幕適配(rem)

    這篇文章主要介紹了移動(dòng) web 端屏幕適配(rem)。詳細(xì)的介紹了移動(dòng) web 端屏幕適配(rem),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-25
  • 詳解H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法

    這篇文章主要介紹了詳解H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-07
  • html5實(shí)現(xiàn)移動(dòng)端適配完美寫法

    這篇文章主要介紹了html5實(shí)現(xiàn)移動(dòng)端適配完美寫法,需要的朋友可以參考下
    2017-11-16
  • 手機(jī)端用rem+scss做適配的詳解

    這篇文章主要介紹了手機(jī)端用rem+scss做適配的詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-15
  • 移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem

    這篇文章主要介紹了移動(dòng)端適配 使px自動(dòng)轉(zhuǎn)換rem的相關(guān)資料,需要的朋友可以參考下
    2019-08-26

最新評(píng)論