img标签的srcset属性允许您根据自己的喜好设置浏览器可以根据像素密度或窗口宽度使用的响应图像。通过这种方式，它只能下载渲染页面所需的资源，例如，如果是在移动设备上，就不能下载更大的图像。
下面的这个例子展示了，我们为4个不同的屏幕尺寸提供了4个不同的图像：
/**
* 犀牛前段部落
* https://www.pipipi.net/
*/
<img src="dog.png"
alt="A picture of a dog"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">在srcset中，我们使用w单位来表示窗口宽度。
因为我们这样做，我们还需要使用size属性:
/**
* 前端教程网
* https://www.pipipi.net/
*/
<img src="dog.png"
alt="A picture of a dog"
sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">在本例中，size属性中的(max-width: 500px) 100vw， (max-width: 900px) 50vw, 800px string描述了图像相对于视口的大小，多个条件之间用逗号分隔。
媒体条件最大宽度:500px设置图像的大小相关的视口宽度。简而言之，如果窗口大小小于500px，它将以窗口大小的100%呈现图像。
如果窗口大小更大但小于900px，它将以窗口大小的50%呈现图像。
如果再大一点，它会以800px渲染图像。
vw单位对大家来说可能是新的，简而言之，我们可以说1vw是1%的窗宽，所以100vw是100%的窗宽。
https://responsivebreakpoints.com/是一个有用的网站，可以生成srcset和逐渐缩小的图像。
