响应式图片
响应式图片：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。并在在改变输出设备类型或者分辨率时，能及时加载对应类型的图片。常见的实现方式：
- srcset和sizes加载不同图片
- picture、source media加载不同图片
- source type指定多种格式
- polyfill-picturefill(推荐)
srcset和sizes加载不同图片
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="imgContainer">
<!--使用sizes属性实现媒体查询
(min-width:900px) 900px,100vw 是一个条件表达式
若满足（）中的条件，执行900px，否则执行100vw-->
<!--使用srcset属性根据宽度加载不同的图片-->
<img sizes="(min-width:900px) 900px,100vw"
srcset="img/480X320.png 480w,
img/640X426.png 640w,
img/720X480.png 720w,
img/900X600.png 900w"
src="img/480X320.png" alt="responsive images">
</div>
</body>
</html> - 效果：
- Width>720
- 640<Width<720
- 480<Width<640
- Width<480
需要注意：我在实际操作中发现，如果一开始打开的页面，宽度是大于900的，那么之后无论怎么缩小可视窗口，图片仍然为900X600的图片。
-
通过查阅资料，发现了问题所在：就是浏览器的更新。具体可以参考响应式图片srcset属性学习笔记的问题解析部分
- 总结如下：
stackoverflow上的回答：It's a feature not a bug. Chrome does not switch the size because Chrome already has a larger image in cache, so there is no need to download new data of the same image.
参考博主的总结：当浏览器中有较大的image资源缓存时，虽然本次渲染应该是渲染的较小的那一张，但是当出现更大的图片资源被缓存时，将替代当前较小的图片资源，这就是现代浏览器做的优化！也就是始终努力给你最清晰的体验
picture、source media加载不同图片
- 代码：
-
<!--使用media进行媒体查询，-->
<!--使用srcset属性根据宽度加载不同的图片-->
<picture>
<source media="(max-width:480px)" srcset="img/480X320.png">
<source media="(max-width:640px)" srcset="img/640X426.png">
<source media="(max-width:720px)" srcset="img/720X480.png">
<source media="(max-width:900px)" srcset="img/900X600.png">
<!--利用 img 指定一个兼容性的图片，如果移动优先，就使用小图片；大设备优先，就用大图片。-->
<img src="img/900X600.png" alt="img">
</picture> - 效果同上。
polyfill-picturefill(推荐)
- 可以看到，虽然现在大部分浏览器都支持
picture和srcset但是仍然不被IE兼容
- 推荐使用：picturefill.js解决
IE 9 10 11等浏览器不支持<picture>标签的问题<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
