srcset屬性獲chrome 34支持

隨著4月9號(hào)Google Chrome 34穩(wěn)定版正式發(fā)布，版本號(hào)為Chrome 34.0.1847.116，該版本包含大量的修正和改進(jìn)，覆蓋Windows、Mac以及Linux三大平臺(tái)。其中最引人的特性是開(kāi)始支持srcset屬性了。

其實(shí)在此之前，Safari已經(jīng)開(kāi)始支持了，而目前來(lái)看，這個(gè)屬性就是為rMBP服務(wù)的，因?yàn)樽烂骐娔X上只有rMBP需要更高分辨率的圖片。但是其實(shí)這個(gè)屬性的用途并不僅限于此。

最常用的用法：

					<img 
src="normal.jpg"
srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" />

但是W3C規(guī)范的描述其實(shí)更詳細(xì)：

To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or 2x, where “100w” means “maximum viewport width of 100 CSS pixels”, “100h” is the same but for height, and “2x” means “maximum pixel density of 2 device pixels per CSS pixel”.via w3c

簡(jiǎn)而言之，就是img標(biāo)簽首先要有個(gè)基本的圖片URL，然后srcset可以用描述/約定/緯度指定更多的圖片，比如1x、2x、4x，100w、100h等，其中100w表示最大viewport為100px的情況，100h與此類似：

					<img 
src="img.jpg"
srcset="img.jpg 320w, img-100.jpg 640w, img-300.jpg 1024w" />

所以srcset不僅僅能用于為高分屏的rMBP提供更清晰的圖片，更能為響應(yīng)式設(shè)計(jì)的網(wǎng)站提供更便捷靈活的圖片顯示方案。

而且，相信以后windows平臺(tái)的筆記本也會(huì)越來(lái)越多的引入高分屏，根據(jù)業(yè)務(wù)來(lái)合理的使用這個(gè)屬性吧。