前幾日看了一篇關(guān)于響應(yīng)式圖片的文章，回想一下平時(shí)做的移動(dòng)端開發(fā)，為了適配retina屏幕，一般都是直接選擇2x圖片來進(jìn)行加載，并沒有針對(duì)不同的DPR進(jìn)行適配。

文章里面講到了srcset屬性的一些應(yīng)用場(chǎng)景，可以用來很好的處理響應(yīng)式圖片的問題。關(guān)于srcset屬性，文章介紹了第一代標(biāo)準(zhǔn)和第二代標(biāo)準(zhǔn)，看完之后，我又查了一些資料和博文。在這里，就對(duì)srcset屬性的使用做一下總結(jié)，結(jié)合自己寫的示例代碼，聊聊對(duì)W的理解。

srcset和srizes都是HTML5對(duì)于img標(biāo)簽的屬性。

首先來看一下第一代標(biāo)準(zhǔn)的使用場(chǎng)景。
<img src="logo@1x.png" srcset="logo@1x.png 1x, logo@2x.png 2x"/>
這個(gè)例子非常簡單，首先設(shè)置默認(rèn)的圖標(biāo)為logo@1x.png，然后用srcset設(shè)置了1x場(chǎng)景和2x場(chǎng)景的適配圖。經(jīng)過這樣的設(shè)置之后，2xDPR的顯示屏?xí)虞d高清的圖片。（如果瀏覽器不支持srcset，則顯示src設(shè)置的圖片）

鑫哥的博文里面有句話寫的非常好。

舊的srcset 是人主導(dǎo)，
而現(xiàn)在新的srcset 是瀏覽器主導(dǎo)

我是這樣理解的，第一代標(biāo)準(zhǔn)的使用，就好比是把js代碼的邏輯簡單的搬到了img標(biāo)簽中，什么樣的條件加載什么樣的圖片，代碼里面可以看到很強(qiáng)的邏輯關(guān)系。第二代標(biāo)準(zhǔn)，是一種新的思路，我們提供不同的圖片資源，給予一定的條件，最終把選擇權(quán)交給瀏覽器，瀏覽器來選擇最佳的圖片進(jìn)行適配。

新標(biāo)準(zhǔn)的例子。（2014年）
<img src="logo-128.png" srcset="logo-128.png 128w,logo-256.png 256w,logo-512.png 512w" sizes="(max-width:500px) 340px,512px" />

sizes屬性中可以進(jìn)行媒體查詢，后面是對(duì)應(yīng)的寬度，上面的例子就是最大寬度小于500px時(shí)，圖片限制寬度為340px,其他情況為128px。

首先看一下，瀏覽器對(duì)于不同DPR的處理，將瀏覽器寬度調(diào)整為1024px,此時(shí)根據(jù)媒體查詢，應(yīng)該顯示128px的圖片，如果此時(shí)瀏覽器模擬1x設(shè)備，則加載logo-128.png。如果模擬2x設(shè)備，則加載logo-256.png。如果模擬3x設(shè)備，則加載logo-512.png。但是最終的顯示寬度都是128px。因?yàn)闉g覽器會(huì)找到最佳適配圖片進(jìn)行加載，我們只要提供不同的圖片規(guī)格就可以了。

再來理解一下w。我們現(xiàn)在將寬度調(diào)整為500px,圖片寬度應(yīng)該為340px,此時(shí)如果是1x設(shè)備，瀏覽器會(huì)選擇logo-512.png進(jìn)行加載。
過程：媒體查詢，剛好為500px,匹配340px，340px對(duì)應(yīng)340w,而logo-128.png對(duì)應(yīng)128w，未達(dá)標(biāo)；logo-256.png對(duì)應(yīng)256w，未達(dá)標(biāo)。最后選擇了最適合的logo-512.png進(jìn)行加載。
當(dāng)然，這里舉這個(gè)例子，是為了理解w和sizes的關(guān)系，平時(shí)使用的時(shí)候，并不會(huì)這樣的奇怪的匹配。

新的標(biāo)準(zhǔn)，瀏覽器為我們做了很多事情，非常的簡介智能，chrome38+可以支持該屬性。
兼容性當(dāng)然是一個(gè)問題，可是要提醒自己多抽時(shí)間了解新特性~