srcset属性获chrome 34支持，大赞！

神飞 发表于 10. Apr, 2014, 分类: Front News, Tips , 发表评论 »
标签：Chrome & HTML5 & srcset

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

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

最常用的用法：

<img src="normal.jpg" srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" http://www.qianduan.net> 但是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可以用描述http://www.qianduan.net约定http://www.qianduan.net纬度指定更多的图片，比如1x、2x、4x，100w、100h等，其中100w表示最大viewport为100px的情况，100h与此类似： <img src="img.jpg" srcset="img.jpg 1x, img-100.jpg 100w, img-300.jpg 300w" http://www.qianduan.net> 所以srcset不仅仅能用于为高分屏的rMBP提供更清晰的图片，更能为响应式设计的网站提供更便捷灵活的图片显示方案。 而且，相信以后windows平台的笔记本也会越来越多的引入高分屏，根据业务来合理的使用这个属性吧。 IE浏览器怎么办？你说呢？呵呵~~ 作者: 神飞 爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯ISUX团队 Follow me on twitter @qianduan。 如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。 您或许也会喜欢： PPT:HTML5 表单——为体验而生 用于WebKit的CSS诀窍 Chrome extension 升级到 manifest version 2 的问题 Chrome开始支持GreaseMonkey Chrome 28发布——hello Blink Chrome for Android发布 IE9 beta对HTML5http://www.qianduan.netCSS3的支持 mac下网页中文字体优化 通过使用Chrome的开发者工具来学习JavaScript -webkit-filter是神马？ 发表评论 昵称 (必填) EMail (必填) (不会被泄露) 个人网站 <http://www.qianduan.nettextarea> <http://www.qianduan.netdiv> <div > <input name="submit" type="submit" tabindex="8" value="提交" http://www.qianduan.net>取消回复<http://www.qianduan.neta> <input type='hidden' name='comment_post_ID' value='14413' http://www.qianduan.net> <input type='hidden' name='comment_parent' value='0' http://www.qianduan.net> <http://www.qianduan.netdiv> <p style="display: none;"><input type="hidden" name="akismet_comment_nonce" value="bf7223a8e9" http://www.qianduan.net><http://www.qianduan.netp> <http://www.qianduan.netform> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv> <http://www.qianduan.netdiv></div> <section class="am-panel am-panel-default"> <header class="am-panel-hd"> <h3 class="am-panel-title">随意打赏</h3> </header> <div class="am-panel-bd"> <center><div id="cyReward" role="cylabs" data-use="reward"></div> </center> </div> </section> </article> <div class="am_news_list_all_center" > <ul class="am-list" > <li class="am-g am-list-item-desced am_list_li" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}"> <center> 评论 </center> </li> </ul> <div id="do-not-say-1" class="am-panel-collapse am-collapse" > <ul class="am-list"> <li class="am-g am-list-item-desced am_list_li"> <!-- UY BEGIN --> <div id="uyan_frame"></div> </li> </ul> </div> </div><!-- en am_news_list_all_center --> <footer class="am_footer"> <div class="yindao"> <p>高效读科技，用关键词过滤资讯，等你加入</p> <a href="http://www.kejilie.com/unread.html" target="_blank" id="yindaolink" rel="nofollow"> 马上加入 </a> </div> <div class="yindao-hr"></div> <div class="am_footer_con" > <div class="am_footer_don"> <dt><img src="/img/logom.png" alt="科技猎"></dt> <dd>专注科技资讯挖掘，通过关键词过滤科技资讯，提高阅读效率10倍以上。 网站定位极少数高效能人士，精准快速定位资讯，大大提高阅读效率。 </div> </div> <div class="so-footerlink"> <p> <a href="http://www.kejilie.com/about.html" title="科技猎" rel="nofollow" >关于我们</a> <a href="http://www.kejilie.com/contact.html" title="联系我们" rel="nofollow">联系我们</a> <a href="http://www.kejilie.com/joinus.html" title="加入我们" rel="nofollow">加入我们</a> <a href="http://www.kejilie.com/links.html" title="友情链接" rel="nofollow">友情链接</a> <!-- <a href="http://www.kejilie.com/donate.html" title="捐助我们" rel="nofollow">捐助我们</a>--> <a href="http://www.kejilie.com/longword.html" title="最新TAG" rel="nofollow" >最新TAG</a> </p> </div> <div class="am_info_line"> CopyRight©2012-2019    科技猎    keji<span>L</span>ie.com    京公网安备 11010602030041号    <a href="https://beian.miit.gov.cn" target=_blank>京ICP备09085575号-7</a></div> </footer> <a target="_blank" onclick="_czc.push(['_trackEvent','用户调查','右下角']);" href="http://cn.mikecrm.com/amttlxP" style="position:fixed;z-index:999;right:15px;bottom: 70px;display: inline-block;width: 20px;border-radius: 5px;color:white;font-size:14px;line-height:17px;background: #2476CE;box-shadow: 0 0 5px #666;word-wrap: break-word;padding: 10px 1px;border: 2px solid white;">提交建议</a> <div data-am-widget="gotop" class="am-gotop am-gotop-fixed am-active"> <a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up" rel="nofollow"></a> </div> <!--share--> <div id="so-share" onmouseout='sharehidden()' onmouseover='stopTime();' style="display: none;position: absolute;top: 50%;left: 50%;" class="share-popover"> <span class="arrow"></span> <div class="share"> <a href="#" onclick="share(this)" title="分享到新浪微博" data-share="weibo" class="share-btn s-weibo"></a> <a href="#" onclick="share(this)" title="分享到腾讯微博" data-share="tencent" class="share-btn s-tcweibo"></a> <a href="#" onclick="share(this)" title="分享到QQ空间" data-share="qzone" class="share-btn s-qzone"></a> <a href="#" onclick="share(this)" title="分享到人人网" data-share="renren" class="share-btn s-renren"></a> </div> </div> <!--shoucangtishi--> <div id="shoucangtishi" class="am-badge am-badge-warning am-text-lg am-round" style="display: none;position:absolute;z-index:100;top:50%;left:50%;"> </div> <!--weixin erweima--> <div class="am-modal am-modal-alert" tabindex="-1" id="weixinbox"> <div class="am-modal-dialog"> <div class="am-modal-hd">微信扫一扫，分享给好友吧。</div> <div class="am-modal-bd" id="weixinpic" > </div> <div class="am-modal-footer"> <span class="am-modal-btn">关闭</span> </div> </div> </div> <!--[if lt IE 9]> <script src="/js/killie.js"></script> <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.ie8polyfill.min.js"></script> <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.widgets.helper.min.js"></script> <script src="http://cdn.bootcss.com/handlebars.js/4.0.5/handlebars.min.js"></script> <![endif]--> <script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript">var jQuery=$;</script> <!-- 解决jquery和其他引入的JS冲突 --> <script src="http://cdn.bootcss.com/amazeui/2.7.0/js/amazeui.min.js"></script> <script type="text/javascript" src="/js/prompt.js?v=1.1"></script> <script type="text/javascript" src="/js/app.js?v=1.7"></script> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?123b569b6ae27e29fadbfdb2c1f43901"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1260590285'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/q_stat.php%3Fid%3D1260590285' type='text/javascript'%3E%3C/script%3E"));</script> <script><!--百度提交--> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script><!--360提交--> (function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?4054411330fc00b0202d43f36579d12c":"https://jspassport.ssl.qhimg.com/11.0.1.js?4054411330fc00b0202d43f36579d12c"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <!-- zhuge --> <script> $('#yindaolink').click(function(){ zhuge.track("底部引导猎物"); }); </script> <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytgHGfGU"></script><!-- dashang --> <!-- UY BEGIN --> <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1836051"></script> <script type="text/javascript"> function Fpop(a){ } function Fhidden(){} zhuge.track("第一次访问内容页"); $('#zhuge_guangaoyindao').click(function(){ zhuge.track("广告引导"); }); $('.zhuge_yanshenyuedu').click(function(){ zhuge.track("延伸阅读"); }); </script> </body> </html>