利用H5实现自动选择二倍图、三倍图


利用H5实现自动选择二倍图、三倍图

前言

为了更明显地看出效果,三种情况下的图片用不一样的图片来搞。

picture + -webkit-min-device-pixel-ratio

picture标签来提供sourceimg。并在source标签的media属性中设置条件,类似于媒体查询。-webkit-device-pixel-ratio表示设备像素比(设备像素 / CSS像素)。

一倍图:当这个比率为1:1时,使用1个设备像素显示1个CSS像素。
二倍图:当这个比率为2:1时,使用4个设备像素显示1个CSS像素,
三倍图:当这个比率为3:1时,使用9个设备像素显示1个CSS像素

1
2
3
4
5
<picture>
<source srcset="./imgs/3x.jpg" media="(-webkit-min-device-pixel-ratio: 3)" />
<source srcset="./imgs/2x.jpg" media="(-webkit-min-device-pixel-ratio: 2)" />
<img src="./imgs/1x.jpg" alt="1x" />
</picture>

在公司的效果更明显,普通显示屏一倍图,mac二倍图,苹果手机三倍图。写这个博客,只能用Chrome来模拟出来。

window(一倍图)

iphone 6/7/8(二倍图)

iphone 12 pro(三倍图)

picture + resolution

-webkit-min-device-pixel-ratio是非标准的。mdn也表示它是resolution的替代方案。

resolution表示设备像素密度的值,当它的单位是dppx时,效果和dpr一样。(-webkit-min-device-pixel-ratio在语法中不允许单位,但是它的隐式单位是dppx

1
2
3
4
5
<picture>
<source srcset="./imgs/3x.jpg" media="(min-resolution: 3dppx)" />
<source srcset="./imgs/2x.jpg" media="(min-resolution: 2dppx)" />
<img src="./imgs/1x.jpg" alt="1x" />
</picture>

效果和上面一样

img srcset

最后的大招:img本身就可以支持自动选择三倍图、二倍图

srcset:一个包含单个或多个以逗号分隔的图像候选列表,表示在img里可以展示哪些图片。每个图像候选字符串由两部分组成,它们间以,分隔。第一部分是图像url,第二部分是条件描述符,表示什么环境下使用该图像。(类似于上面的media

而要实现自动选择三倍图、二倍图,条件描述符就可以使用像素密度描述符,它指定了在什么样的显示器像素密度下应用相应的图像资源。简单来说就是跟dpr差不多。它由一个非零浮点值和小写字母x组成,如2x2.0x

1
2
3
4
5
6
7
<img srcset="
./imgs/3x.jpg 3x,
./imgs/2x.jpg 2x,
./imgs/1x.jpg 1x"
src="images.jpg"
alt="Image"
/>

效果基本和上面一样。

有一点点不一样的是,picture在切换设备时,图片也是会变的。如window变成iphone 12 pro。但是,imgsrcset则需要刷新才能看到效果。


文章作者: 赤蓝紫
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 赤蓝紫 !
评论
  目录