响应式图片

第一种解决方法： img标签的srcset属性 参考img

1. src 属性是 1x 候选项。1x代表DPR(设备像素比)为1,可以根据不同DPR来选择不同尺寸的图片

2. 当使用 'w' 描述符时，src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。

3. 兼容性并不是很好，IE没有实现，移动端只有iOS实现

PC端IE没有实现

移动端只有iOS实现

第二种解决方法：

1.使用 media 属性 如果这个媒体查询匹配结果为 false，那么这个元素会被跳过。

2.使用 type 属性，srcset 属性指向的资源指定一个 MIME 类型，如果用户代理不支持指定的类型，那么这个 元素会被跳过。

3.兼容性比img标签的srcset稍微好一些，但是也有很多不足，不过还有有一个辅助工具picturefill.js可以帮助我们解决这些兼容性。

PC

image.png