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側的響應式圖片的用法說明,希望可以對移動端同學的學習有所幫助。