`
axl234
  • 浏览: 260198 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

srcset属性获chrome 34支持

阅读更多

Chrome 34终于正式发布,最引人的特性是开始支持srcset属性了。

其实在此之前,Safari已经开始支持了,而目前来看,这个属性就是为rMBP服务的,因为桌面电脑上只有rMBP需要更高分辨率的图片。但是其实这个属性的用途并不仅限于此。

最常用的用法:

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

但是W3C规范的描述其实更详细:

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提供更清晰的图片,更能为响应式设计的网站提供更便捷灵活的图片显示方案。

而且,相信以后windows平台的笔记本也会越来越多的引入高分屏,根据业务来合理的使用这个属性吧。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics