您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

srcset属性获chrome 34支持

随着4月9号Google Chrome 34稳定版正式发布,版本号为Chrome 34.0.1847.116,该版本包含大量的修正和改进,覆盖Windows、Mac以及Linux三大平台。其中最引人的特性是开始支持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平台的笔记本也会越来越多的引入高分屏,根据业务来合理的使用这个属性吧。

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd2002.html
Div中height:100%无效的解决办法
网页input搜索框心得
图趣网微信
建议反馈
×