|
这篇文章主要介绍了详解如何使用image-set适配移动端高清屏图片的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、注意注意注意！
什么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的机型
2018081415201144.png
这时候我想说一句：管他什么dpr！！！老子抄起3倍率的图就是一顿干！！！
2018081415201145.jpg
冷静...冷静...
从上图可以看出，不同倍率的图片，直接导致的就是体积大小，3倍率的图片大小几乎是2倍率图片大小的一倍，我们如果直接用3倍率图的话就会导致dpr较低的机器白花了流量和时间去下载一个较大的图片，这很显然是不科学的，但是如果我们仅仅用2倍率图，dpr=3的机型就会显得有点模糊。（别跟我说dpr为1的机型，照现在手机硬件的发展速度，我想应该很快就会没有的了）
那么问题来了，我们前端可以如何去像客户端一样去对不同dpr屏幕的机型做适配呢？
三、使用image-set适配方案
目前这个css属性的支持度如下
2018081415201146.png
2018081415201147.png
这里我们看看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)：
2018081415201148.png
iphone6/7/8 plus (dpr=3)：
2018081415201249.png
对！就是这么神奇！让浏览器根据dpr自动选择获取哪种倍率的图片，那如果我们的浏览器不支持这个属性怎么办？这里随便找edge测测吧，实在没有版本低的手机
2018081415201250.png
图中含有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 ...大家可以按照自身需求参考一下自己写一个。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2018-8-14 15:25:15
