利用H5实现自动选择二倍图、三倍图
前言
为了更明显地看出效果,三种情况下的图片用不一样的图片来搞。
picture + -webkit-min-device-pixel-ratio
用picture
标签来提供source
和img
。并在source
标签的media
属性中设置条件,类似于媒体查询。-webkit-device-pixel-ratio
表示设备像素比(设备像素 / CSS像素)。
一倍图:当这个比率为1:1时,使用1个设备像素显示1个CSS像素。
二倍图:当这个比率为2:1时,使用4个设备像素显示1个CSS像素,
三倍图:当这个比率为3:1时,使用9个设备像素显示1个CSS像素
1 |
|
在公司的效果更明显,普通显示屏一倍图,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 |
|
效果和上面一样
img srcset
最后的大招:
img
本身就可以支持自动选择三倍图、二倍图
srcset
:一个包含单个或多个以逗号分隔的图像候选列表,表示在img
里可以展示哪些图片。每个图像候选字符串由两部分组成,它们间以,
分隔。第一部分是图像url,第二部分是条件描述符,表示什么环境下使用该图像。(类似于上面的media
)
而要实现自动选择三倍图、二倍图,条件描述符就可以使用像素密度描述符,它指定了在什么样的显示器像素密度下应用相应的图像资源。简单来说就是跟dpr差不多。它由一个非零浮点值和小写字母x
组成,如2x
或2.0x
。
1 |
|
效果基本和上面一样。
有一点点不一样的是,
picture
在切换设备时,图片也是会变的。如window
变成iphone 12 pro
。但是,img
的srcset
则需要刷新才能看到效果。