其實(shí)一直都關(guān)注網(wǎng)頁(yè)的自適應(yīng)設(shè)計(jì)，也學(xué)習(xí)并應(yīng)用著不少可行的方案萨西。
大部分情況下，我們?cè)谠O(shè)計(jì)一個(gè)頁(yè)面的時(shí)候旭旭，為了照顧普通屏幕和視網(wǎng)膜屏幕谎脯，同時(shí)兼顧 PC 端和手機(jī)端，都會(huì)設(shè)計(jì)使用到多尺寸的圖片持寄。
對(duì)于基于 CSS background-image 屬性的圖片而言源梭，尺寸只需要設(shè)計(jì)原始 和 @2x 兩種即可(參考：《image-set實(shí)現(xiàn)Retina屏幕下圖片顯示》 作者：大漠)。如：
.logo {
background-image: url(logo_1x.png);
background-image: -webkit-image-set(url(logo_2x.png) 2x);
background-repeat: no-repeat;
}
但對(duì)于 img 標(biāo)簽就不能用這種方法了稍味。在普通屏幕下废麻，其 src 屬性可以指定為一個(gè)原始尺寸的圖片，在視網(wǎng)膜屏幕下則可以使用 srcset 設(shè)置一個(gè)或多個(gè)尺寸的圖片（參考：《響應(yīng)式圖片srcset全新釋義sizes屬性w描述符》- 張?chǎng)涡?/a>）模庐。
<img src="圖片.jpg" srcset="圖片.jpg 640w 1x,
圖片-hd.jpg 640w 2x,
圖片-large.jpg 1x,
圖片-large-hd.jpg 2x" alt="" />
還有一種方法 —— picture元素烛愧。<picture> 元素包含一系 <source> 子元素后跟著需要的 <img> 元素。source 元素原理和video 元素的子源類似掂碱。
<picture>
<source media="(min-width: 900px)" srcset="圖片-A.jpg, 圖片-A_2x.jpg 2x" />
<source media="(min-width: 750px)" srcset="圖片-B.jpg, 圖片-B_2x.jpg 2x" />
<img src="圖片.jpg" srcset="圖片_2x.jpg" alt="" />
</picture>
每個(gè)源必須有一個(gè) srcset 屬性怜姿，可選屬性包括 media、sizes 和type疼燥。<source> 元素上的 sizes 和 srcset 的使用和 <img> 上完全一樣沧卢。
標(biāo)準(zhǔn)的用法如下：
<picture class="">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="圖片-a.png 1x, 圖片-a_2x.png 2x" media="(min-width: 990px)" />
<source srcset="圖片-b.png 1x, 圖片-b_2x.png 2x" media="(min-width: 750px)" />
<!--[if IE 9]></video><![endif]-->
<img srcset="圖片.png 1x, 圖片_2x.png 2x" alt="" />
</picture>
有了上面的解決方案，我們就可以針對(duì)不同尺寸的設(shè)備設(shè)計(jì)不同尺寸的圖片已實(shí)現(xiàn)節(jié)省流量和加速載入的目的醉者。
