HTML5響應式圖片技術中文圖解
阿新 • • 發佈：2018-12-23
一、本文內容乾貨量遠不及之前的那篇
首先，需要宣告，或者叫告知吧，就是，本文屬於補充，真正關於響應式圖片技術的乾貨內容參見我之前的“響應式圖片srcset全新釋義sizes屬性w描述符”一文。
我只是把上面的英文變成了中文，一些圖片時候實時效果可以去原頁面觀摩。
另外，補充了一些遺漏的關於響應式圖片處理的tips.
1. 作為背景圖片，image-set()這廝
這個是我自己補充的，精力有限，我就不作圖了，嘻嘻，使用示意如下(目前需要-webkit-私有字首)：
| 123 | .example {background-image:-webkit-image-set("test.png"1x,"test-2x.png"2x,"test-print.png"600dpi);} |
相容性如下：
2. 尺寸固定，密度變化
這裡出現了srcset，相容性如下：
3. 尺寸和密度都變化
4. 尺寸，密度，資源都變化
5. 不同的圖片類別
二、直接結語
本文主要圖解了幾種HTML側的響應式圖片的用法說明，希望可以對移動端同學的學習有所幫助。