昨天忽然i想起来前两年尝试过的img-srcset
这个属性,当时赶着完成课程设计,在firebox发现有效果,在chrome上半点用都没,可是这玩意的兼容性以下:php
其实兼容性我以为挺好的,因此我仍是要再尝试尝试!chrome
srcsert
具备两个版本:浏览器
旧版缓存
复制代码
新版spa
<img src="./img/x-pc.png"
srcset="./img/x-pc.png 300w, ./img/x-pc@2x.png 500w"
sizes="(min-width: 300px) 400px, calc(100vw - 2rem)">复制代码
emm.....旧版不想说了,反正很差用也已经被淘汰了,新版的,其实很简单:设计
srcset
这个属性定义图片而后告诉浏览器你图片的宽度sizes
这个属性定义在不一样状况下,对于图片宽度的定义,单位除了不能使用%(很费解,不过能够用vw代替),calc()也能够懒得录gif,当你宽度慢慢增大一个临界点时浏览器会去加载二倍图而且替换,sizes
规定了图片的大小,好比第一个例子上图片大小恒定500px,注意sizes的合理设置,不然会产生图片大小的跳动,获得两个结论:3d
咱们来探究一下w这个单位,先从sizes
这个属性提及。
sizes至关于动态定义图片的width
和height
,而后咱们把上面的例子作一些修改:code
<img src="./img/x-pc.png"
srcset="./img/x-pc.png 150w, ./img/x-pc@2x.png 250w"
sizes="(min-width: 200px) 400px, calc(100vw - 20px)">复制代码
图1: 2 (150px - 20px)
图2: 2 (171px - 20px)
我我的的理解是:w只是告诉浏览器,我认为这张图是什么大小,浏览器会根据你给的值取计算出一个比值,好比上面这个比值是2,而后去乘下面的sizes,公式就是:
实际渲染大小 = (原图大小 / 声明大小) * 对应的sizescdn
我猜想,若是按w等于图片宽度的话,在高质量的图片下并不合适,因此w只是起到一个描述图片尺寸做用,就和你爸妈同样,我以为XXXXXX。blog
我瞎写,你随便看看就好,以为哪里不对能够留言