HTML基础--响应式图片

学习目标：

学习实现一个响应式图像：根据显示设备的分辨率不同加载不同的类型的图片，防止带宽的浪费。同时，在改变设备类型或者分辨率时，能够及时加载对应的图片。

---

学习内容：

响应式图像教程 - 阮一峰的网络日志
PLACEHOLD.IT - 用来占位的不同大小的图片生成工具

---

学习产出：

• srcset属性用来指定多张图像，适应不同像素密度的屏幕。解决像素密度的适配。
• sizes属性列出不同设备的图像显示宽度，如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。解决屏幕大小的适配。
• 如果要同时适配不同像素密度、不同大小的屏幕，就要用到<picture>标签。它是一个容器标签，内部使用<source>和<img>，指定不同情况下加载的图像。
• 用HTML来实现响应式图片比较简单，当然，响应式图片也可以通过CSS和JavaScript来实现。