<picture>标签实现响应式图片

• 一个picture标签里面可以包含多个source标签，每个source标签里可以使用媒体查询和设置srcset属性，浏览器会遍历picture标签中的每个source标签，根据当下的情况，找到最合适的srcset,然后来设置img标签的src属性。

<div class="slider-img">
    <picture>
        <source srcset="img/ad001-l.png" media="(min-width:50em)">
        <source srcset="img/ad001-m.png" media="(min-width:30em)">
        <img src="img/ad001.png" alt="广告图片">
    </picture>
</div>

• 注意：兼容性较差，配合picturefill插件来使用

• picturefill 官方

• picturefill github