响应式图像教程
网页在不同尺寸的设备上，都有良好的显示效果，叫做"响应式设计"（responsive web design）。 响应式设计的网页图像，就是"响应式图像"（responsive image）。
响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。本文介绍最简单的、语义性最好的 HTML 方法，浏览器原生支持。
一、问题的由来
我们知道，标签用于插入网页图像，所有情况默认插入的都是同一张图像。
上面代码在桌面端和手机上，插入的都是图像文件foo.jpg。 这种处理方法固然简单，但是有三大弊端。
为了解决上一节的这些问题，HTML 语言提供了一套完整的解决方案。首先，标签引入了srcset属性。
srcset属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子。