第一种解决方法： img标签的srcset属性 参考img
- src 属性是 1x 候选项。1x代表DPR(设备像素比)为1,可以根据不同DPR来选择不同尺寸的图片
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x">
- 当使用 'w' 描述符时，src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
- 兼容性并不是很好，IE没有实现，移动端只有iOS实现
PC端IE没有实现
移动端只有iOS实现
第二种解决方法： <picture>
1.使用 media 属性 如果这个媒体查询匹配结果为 false，那么这个<source>元素会被跳过。
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo.png" alt="MDN">
</picture>
2.使用 type 属性，srcset 属性指向的资源指定一个 MIME 类型，如果用户代理不支持指定的类型，那么这个<source> 元素会被跳过。
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
3.兼容性比img标签的srcset稍微好一些，但是也有很多不足，不过还有有一个辅助工具picturefill.js可以帮助我们解决这些兼容性。
PC
image.png
