1、img元素srcset屬性

srcset屬性用於瀏覽器根據寬、高和畫素密度來載入相應的圖片資源。

屬性格式：圖片地址，寬度描述，畫素密度描述 

eg: <img src="small.jpg" srcset="big.jpg 1440w,middle.jpg 800w,small.jpg 1x"/>

上面例子表示瀏覽器寬度達到800px則載入middle.jpg，達到1400px則載入big.jpg（畫素密度描述只對固定寬度圖片有效）

2、img元素的size屬性 ：給瀏覽器提供一個預估的圖片顯示寬度。

屬性格式：媒體查詢，寬度描述（支援px）

<img src="images/gun.png"

  srcset="images/bg_star.jpg 1200px,images/share.jpg 800w,images/gun.png 320w"

  sizes="(max-width:320px) 300w,1200w"/>

上面例子表示瀏覽器視口為320px時，圖片寬度為300px，其他情況為1200px。

3、img-set()支援根據使用者解析度適配影象

body{

 background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);

}

上述程式碼將會為普通螢幕使用pic-1.jpg，為高分屏使用 pic-2.jpg，如果更高的解析度則使用pic-3.png.