背景
昨天突然i想起来前两年尝试过的img-srcset这个属性，当时赶着完成课程设计，在firebox发现有效果，在chrome上半点用都没，但是这玩意的兼容性如下：
imgset兼容性
其实兼容性我觉得挺好的，所以我还是要再尝试尝试！
介绍
srcsert具有两个版本：
- 旧版
- 新版
<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()也可以
看一看
- 宽度250px情况下
250px
- 宽度300px情况下
300px
懒得录gif，当你宽度慢慢增大一个临界点时浏览器会去加载二倍图并且替换，sizes规定了图片的大小，比如第一个例子上图片大小恒定500px，注意sizes的合理设置，否则会产生图片大小的跳动，得到两个结论：
- 优先适配高质量图片原则
- 存在缓存时优先加载缓存图片
进阶
我们来探究一下w这个单位，先从sizes这个属性说起。
sizes相当于动态定义图片的width和height，然后我们把上面的例子做一些修改：
<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)">
150px
171px
图1： 2 * （150px - 20px）
图2： 2 * （171px - 20px）
我个人的理解是：w只是告诉浏览器，我认为这张图是什么大小，浏览器会根据你给的值取计算出一个比值，比如上面这个比值是2，然后去乘下面的sizes，公式就是：
实际渲染大小 = （原图大小 / 声明大小） * 对应的sizes
为什么这么做呢？
我猜测，如果按w等于图片宽度的话，在高质量的图片下并不合适，所以w只是起到一个描述图片尺寸作用，就和你爸妈一样，我觉得XXXXXX。
结论
我瞎写，你随便看看就好，觉得哪里不对可以留言
