您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 移動前端 >> 瀏覽設計教程

srcset屬性獲chrome 34支持

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

其實在此之前,Safari已經(jīng)開始支持了,而目前來看,這個屬性就是為rMBP服務的,因為桌面電腦上只有rMBP需要更高分辨率的圖片。但是其實這個屬性的用途并不僅限于此。

最常用的用法:

 

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

 

但是W3C規(guī)范的描述其實更詳細:

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標簽首先要有個基本的圖片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提供更清晰的圖片,更能為響應式設計的網(wǎng)站提供更便捷靈活的圖片顯示方案。

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

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd2002.html
Div中height:100%無效的解決辦法
網(wǎng)頁input搜索框心得
圖趣網(wǎng)微信
建議反饋
×