響應式頁面中經常用到根據(jù)屏幕密度設置不同的圖片。這時就用到了 img 標簽的 srcset 屬性。srcset 屬性用于設置不同屏幕密度下，img 會自動加載不同的圖片。用法如下：

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

使用上面的代碼，就能實現(xiàn)在屏幕密度為 1x 的情況下加載 image-128.png, 屏幕密度為 2x 時加載 image-256.png。

按照上面的實現(xiàn)，不同的屏幕密度都要設置圖片地址，目前的屏幕密度有 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 單位，可以理解成圖片質量。如果可視區(qū)域小于這個質量的值，就可以使用。瀏覽器會自動選擇一個最小的可用圖片。

sizes 語法如下：

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

sizes 就是指默認顯示 128px, 如果視區(qū)寬度大于 360px, 則顯示 340px。