html5移动端响应式图片使用方法

最近在开发移动端的项目，既要适应手机，又要适应paid，那么页面中的图片要自适应，用em、rem去布局的话，图片很难自适应。

我们为什么要用响应式图片呢，假如有一张图片的显示宽度为200px，那么，它在 1x（即设备像素比为 1 的显示器） 的显示器上，是占了 200 个物理像素（即实际所占的像素）；它在 2x 的显示器上，实际上是占了 400 个物理像素；在 3x 的显示器上，实际上是占了 600 个物理像素；在 4x 的显示器上就是占了 800 个物理像素。如果这个图片只提供 200 像素的尺寸，那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本，那么在 1x~3x 的设备上会显得多余，因为加载时间会相较长，所以我们要使用响应式图片。
好了，废话不多说了，在html5中新增加了<picture>标签，<picture> 标签提供了浏览器原生支持的图像资源加载方法。web开发者们无需在使用CSS和Javascript Hacks来在响应式设计中处理图像，而使用这种设计方式创造出的产品的使用者们会从这个浏览器底层优化的图像资源加载方式获益——特别是对于那些网络加载速度很慢的用户。随着srcset和sizes这两个<img>标签的新属性的加入，<picture>标签使得程序员在选择加载图像资源时更具灵活性。书写明确地的HTML标记，让浏览器去查明接下来这些适应情况，不管是单独使用还是和其他方法一同使用，从而更好地支持响应式设计，就爱哭爱网页加载速度。
<picture>语法
下面的这一串HTML和CSS语句片段就是我们为了实现上边这个demo的所有代码。

<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png">
<img
src="images/kitten-curled.png"
alt="a cute kitten">
</picture>

使用方式虽然与css媒体（media）方法一样，但是肯定会有兼容性的问题

也可以使用宽度表达式合并属性，谷歌的web开发最佳实践手册已经涵盖了最新的<img/>标签支持的sizes属性：
当一个图片的大小和分辨率是未知的并且有可能是浮动的，那么我们就很难去给他一个适应的属性
不去给图片一个确切的宽度和分辨率，取而代之是给<img/>对象增加属性，以允许浏览器经过计算之后改变他的宽度，选择最确切的一个尺寸进行下载
下面是一个使用sizes的例子，这个图片永远只填满设备宽度的80%，实现方法是使用secset属性来选择160px、320px、640px、1280px的宽度，浏览器会根据对应的浏览器视图宽度来选择展示图片。

<img src="lighthouse-160.jpg" alt="lighthouse"
sizes="80vw"
srcset="lighthouse-160.jpg 160w,
lighthouse-320.jpg 320w,
lighthouse-640.jpg 640w,
lighthouse-1280.jpg 1280w">