picture 元素使用

picture 是HTML语言新的标签，它内部可以设置多个标签，而且必须具有srcset属性，来指定不同的图像文件名路径，根据不同的条件进行加载，通过 srcset、media属性，来达到响应式布局按需加载不同设备的图片，我们可以先来看看代码实现：

我们再上图看到的比较明显熟悉的属性有media：
media 属性根据您的条件来选择 元素的依据的媒体条件(media condition)（类似于媒体查询），如果这个媒体条件匹配结果为 false，那么这个 元素会被跳过；

---

元素现在的使用情况
现在，Chrome，Firefox和Opera浏览器都已经实现了对 元素的支持，目前很多老的浏览器没有支持，在不久的将来，在其他浏览器也将得到广泛的支持。但现在这一时刻还没有完全来临。
与此同时，如果你现在就想在其它浏览器使用 元素可能还需要等待。你也可以使用 Picturefill2.0 ; Filament 成员 提供的一个polyfill。
如果你添加这个属性，你需要在引人picturefill之间加入一行脚本，同时也是为了让老的浏览器在picturefill还没有完成加载时遇到picturefill可以识别picture元素。
通过下载并添加 picturefill.js 文件到您项目的头部就可以实现：
Picturefill在其他的IE版本都可以正常工作，但是IE9却不能识别被包裹在 picture 标签中的 source 元素。为了解决这个问题，在 video 标签内包住你的源元素，这就会使他们在IE9中被识别；

今天内容小记结束。