Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

srcset 更有效地利用设备像素

  移动设备上的物理像素很多时候大于浏览器使用的单位像素,也就是说浏览器对网页做了个放大。我们可能希望客户端看到更高清的图片,因为放大图片后渲染就是在浪费物理像素。为了更有效的的使用物理像素,我们需要根据不同的设备像素比来选择图片。
  IMG元素的srcset属性就是用来对不同的设备像素比选择不同图片的(注意IE和Firefox暂不支持) <base href="http://www.web-tinker.com/files/chrome icons/" />
<img srcset="64.png .5x,128.png 1x,256.png 2x" />



  在各个设备像素比下图片都是清晰的,因为IMG元素选择了最适合的图片。srcset属性的格式是有很多组“path ratio”用逗号隔开。path是图片地址,ratio是对应的设备像素比,单位“x”实际上就是dppx(dots per pixel)的缩写。
  但和@media不同的是,图片渲染后再修改devicePixelRatio是不会有影响的。它只适用于在移动设备上突破浏览器的像素限制来更清晰的展示图片,不适合作为响应式布局来使用。
  另外,建议同时对IMG标签的src属性赋值,以防止在不支持的浏览器上不显示任何东西。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^