Html5里實(shí)現(xiàn)不同手機(jī)設(shè)備或者不同分辨率加載不同大小的圖片：

<picture width="500" height="500">

<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

<source srcset="small-1.jpg 1x, small-2.jpg 2x">

<img src="small-1.jpg" alt="">

<p>Accessible text</p>

</picture>

可以看到這里的「srcset」屬性類似「image-set」，通常情況下，「srcset」里面的資源是具有 fallback 特性的，也就是說(shuō)第一個(gè)圖片資源無(wú)法加載的時(shí)候可以跳過(guò)加載后面的備用資源。

<picture>

<source media=”(min-width: 45em)” srcset=”large.jpg”>

<source media=”(min-width: 18em)” srcset=”medium.jpg”>

<img src=”small.jpg” alt=”Robert Anton Wilson laughing”>

</picture>

基本用法： 當(dāng)設(shè)備寬度大于45em時(shí)啟用large.jpg