image的srcset屬性

介紹

響應式頁面中常常用到根據屏幕密度設置不一樣的圖片。這個時候確定會用到image標籤的srcset屬性。srcset屬性用於設置不一樣屏幕密度下，image自動加載不一樣的圖片。用法以下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代碼，就能實如今屏幕密度爲1x的狀況下加載image-128.png, 屏幕密度爲2x時加載image-256.png。

新標準

按照上面的實現，不一樣的屏幕密度都要設置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，若是每個圖片都設置4張圖片的話，太麻煩了。因此就有了新的srcset標準。代碼以下：

<img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點。
對於srcset裏面出現了一個w單位，能夠理解成圖片質量。若是可視區域小於這個質量的值，就能夠使用，固然，瀏覽器會自動選擇一個最小的可用圖片。
sizes語法以下：

sizes="[media query] [length], [media query] [length] ... "

上面例子中的sizes就是指默認顯示128px, 若是視區寬度大於360px, 則顯示340px。

總結

img的srcset屬性方便的解決了頁面圖片適應不一樣屏幕密度的狀況。目前除了IE沒有兼容到，已經所有都兼容了，能夠放心使用。