第一種解決方法： img標(biāo)簽的srcset屬性 參考img
- src 屬性是 1x 候選項(xiàng)。1x代表DPR(設(shè)備像素比)為1,可以根據(jù)不同DPR來(lái)選擇不同尺寸的圖片
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x">
- 當(dāng)使用 'w' 描述符時(shí)，src 屬性會(huì)被忽略。當(dāng)匹配了媒體條件 (min-width: 600px) 時(shí)，圖像將寬 200px，否則寬 50vw（視圖寬度的50%）。
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
- 兼容性并不是很好，IE沒有實(shí)現(xiàn)，移動(dòng)端只有iOS實(shí)現(xiàn)
PC端IE沒有實(shí)現(xiàn)
移動(dòng)端只有iOS實(shí)現(xiàn)
第二種解決方法： <picture>
1.使用 media 屬性 如果這個(gè)媒體查詢匹配結(jié)果為 false，那么這個(gè)<source>元素會(huì)被跳過(guò)。
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo.png" alt="MDN">
</picture>
2.使用 type 屬性，srcset 屬性指向的資源指定一個(gè) MIME 類型，如果用戶代理不支持指定的類型，那么這個(gè)<source> 元素會(huì)被跳過(guò)。
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
3.兼容性比img標(biāo)簽的srcset稍微好一些，但是也有很多不足，不過(guò)還有有一個(gè)輔助工具picturefill.js可以幫助我們解決這些兼容性。
PC
image.png
