image-set
image-set是CSS4草案中的一個屬性，目的就是保證圖片在屏幕上的自適應。目前image-set只能使用webkit瀏覽器的私有屬性“-webkit”。
語法
image-set() = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ] <resolution>
image-set() 可以根據用戶設備的分辨率匹配合適的圖像。爲不同的設備分配合適得圖像;
示例：下述示例1代碼將會爲普通屏幕使用 test.png，爲高分屏使用 test-2x.png，如果更高的分辨率則使用 test-print.png，比如印刷。
div {
background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}
div {
background-image: -webkit-image-set(url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x,url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x);
}
兼容性
需要注意的是，目前這些瀏覽器支持的語法是：image-set( <url> | <string> )，寫法如同示例中的第二種寫法。
image-set真的很實用，很可惜的是，他僅支持background-image屬性，而不能使用在“<img>”標籤中。
實際運用
一般在實際運用時，會和background一起用，如下：
selector {
background-image: url(no-image-set.png);
background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}
類似於不同的文本，圖像也會顯示成不同的：
- 不支持image-set：在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
- 支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
- Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。
關於srcset
查閱image-set時，也順便翻看到了srcset屬性，img的srcset屬性方便的解決了頁面圖片適應不同屏幕密度的情況。目前除了IE沒有兼容到，已經全部都兼容了，可以放心使用。這個屬性也就彌補了image-set只能在background使用的問題。
兼容性：
srcset這個屬性用於：以最合適的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）
示例用法如下：
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">
當然，我們也可以簡寫成：
<img src="mm-width-128px.jpg" srcset="mm-width-256px 2x">
新標準
按照上面的實現，不同的屏幕密度都要設置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，如果每一個圖片都設置4張圖片的話，太麻煩了。所以就有了新的srcset標準。代碼如下
<img src="source.jpg" width="100%"
srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">
<img src="image-128.png"
srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
sizes="(max-width: 360px) 340px, 128px" />
1x、2x 表示目標屏幕的像素密度；400w、600w表示目標瀏覽器的寬度的限度，如瀏覽器寬度550w時，匹配600w的src。
對於srcset裏面出現了一個w單位，可以理解成圖片質量。如果可視區域小於這個質量的值，就可以使用，當然，瀏覽器會自動選擇一個最大的可用圖片。
sizes語法如下：
sizes="[media query] [length], [media query] [length] ... "
上面例子中的sizes就是指默認顯示128px, 如果視區寬度大於360px, 則顯示340px。
注意，這裏所有的值都是指寬度值，且單位任意，em, px, cm, vw, ...都是可以的，甚至可以CSS3的calc計算，例如：
sizes="(max-width: 360px) calc(100vw - 20px), 128px"
表示當視區寬度不大於360像素時候，圖片寬度爲整個視區寬度減去20像素的大小。