一、注意注意注意!

什么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的机型

详解如何使用image-set适配移动端高清屏图片

这时候我想说一句:管他什么dpr!!!老子抄起3倍率的图就是一顿干!!!

详解如何使用image-set适配移动端高清屏图片

冷静...冷静...

从上图可以看出,不同倍率的图片,直接导致的就是体积大小,3倍率的图片大小几乎是2倍率图片大小的一倍,我们如果直接用3倍率图的话就会导致dpr较低的机器白花了流量和时间去下载一个较大的图片,这很显然是不科学的,但是如果我们仅仅用2倍率图,dpr=3的机型就会显得有点模糊。(别跟我说dpr为1的机型,照现在手机硬件的发展速度,我想应该很快就会没有的了)

那么问题来了,我们前端可以如何去像客户端一样去对不同dpr屏幕的机型做适配呢?

三、使用image-set适配方案

目前这个css属性的支持度如下

详解如何使用image-set适配移动端高清屏图片 

详解如何使用image-set适配移动端高清屏图片

这里我们看看IOS与安卓的兼容度,IOS在8以上与安卓4.4以上都已经兼容了这个css属性了,当然下面我们会给出不兼容这个属性的方案。

我们来看个例子先

.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
    );
}

我们打开chrome看一看这样设置有什么效果

iphone6/7/8 (dpr=2):

详解如何使用image-set适配移动端高清屏图片

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

详解如何使用image-set适配移动端高清屏图片

对!就是这么神奇!让浏览器根据dpr自动选择获取哪种倍率的图片,那如果我们的浏览器不支持这个属性怎么办?这里随便找edge测测吧,实在没有版本低的手机

详解如何使用image-set适配移动端高清屏图片

图中含有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/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
    );
}

我自己是写了一个这样的插件 postcss-auto-set-imageset ...大家可以按照自身需求参考一下自己写一个。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。