HTML5 自适应像素比

■知识点

    除了source元素外，HTML5为img元素也新增了srcset属性。srcset属性是一个包含一个或多个源图的集合，不同源图用逗号分隔，每一个源图由下面两部分组成。

    图像URL。

    x(像素比描述）或w (图像像素宽度描述）描述符。描述符需要与图像URL以一个空格进行分隔，w描述符的加载策略是通过sizes属性里的声明来计算选择的。

    如果没有设置第二部分，则默认为lx。在同一个srcset里，不能混用x描述符和w描述符，或者在同一个图像中，既使用x描述符，也使用w描述符。

    sizes属性的写法与srcset相同，也是用逗号分隔的一个或多个字符串，每个字符串由下面两部分组成。

    媒体查询。最后一个字符串不能设置媒体查询，作为匹配失败后回退选项。

    图像size (大小）信息。注意，不能使用％来描述图像大小，如果想用百分比来表示，应使用类似于vm (lOOvm = 100%设备宽度）这样的单位来描述，其他的（如px、em等）可以正常使用。

    sizes里给出的不同媒体查询选择图像大小的建议，只对w描述符起作用。也就是说，如果srcset里用的是x描述符，或根本没有定义srcset，这个sizes是没有意义的。