標籤實現響應式圖片

• 一個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