srcset屬性獲chrome 34支持
隨著4月9號Google Chrome 34穩(wěn)定版正式發(fā)布,版本號為Chrome 34.0.1847.116,該版本包含大量的修正和改進(jìn),覆蓋Windows、Mac以及Linux三大平臺。其中最引人的特性是開始支持srcset屬性了。
其實在此之前,Safari已經(jīng)開始支持了,而目前來看,這個屬性就是為rMBP服務(wù)的,因為桌面電腦上只有rMBP需要更高分辨率的圖片。但是其實這個屬性的用途并不僅限于此。
最常用的用法:
<img src="normal.jpg" srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" /> |
但是W3C規(guī)范的描述其實更詳細(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
簡而言之,就是img標(biāo)簽首先要有個基本的圖片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è)計的網(wǎng)站提供更便捷靈活的圖片顯示方案。
而且,相信以后windows平臺的筆記本也會越來越多的引入高分屏,根據(jù)業(yè)務(wù)來合理的使用這個屬性吧。
本文地址:http://likemindfilms.com/tutorial/wd2002.html