图片srcset - 成长小破站

webkit的一个新特性
srcset
其中指出了使用图片作为在低分辨率的显示屏上显示的默认图片以及不能识别srcset属性的浏览器中也会使用该图片；而srcset中指定的图片，则会在能识别srcset属性的浏览器中同时是高分辨率屏幕中显示。可以看到，其语法类似于苹果对Retina-ready图形卡的定义：开发人员只需提供一个备用的文件名(alternate filename)和倍数放大(resolution multiplier)，比如1x、2x或4x。"Resolution Multiplier"是用来衡量"多少个物理像素组成'一个'像素点的方法"，例如iPhone 5的屏幕分辨率为1136x640，但"显示分辨率"为568x320。这意味着4个物理像素组成了一个"显示像素"，或称"4x multiplier"。

    <img 
 srcset="http://placehold.it/1024x500&text=1024+Large.jpg 1024w, http://placehold.it/600x250&text=600+Medium.jpg 600w, http://placehold.it/300x150&text=500+Small.jpg 500w" 
 sizes="(min-width:1000px) 33.3vw,(min-width:500px) 50vw, 100vw" src="http://placehold.it/300x150&text=Small.jpg+No+Picture+Support"  
     alt="Picture SRCSET" />