HTML5技术

HTML5图像适配介绍

字号+ 作者: 来源:    2014-11-17 18:29 我要评论( )

现在移动互联网日新月异,各种移动设备层出不穷,在iPhone 4上最先出现视网膜屏幕后,这种技术快速的被大多数智能移动设备所采用,可以遇见将会快速的普及开来。 但是这也对我们的Web提出了更高的...

        现在移动互联网日新月异,各种移动设备层出不穷,在iPhone 4上最先出现视网膜屏幕后,这种技术快速的被大多数智能移动设备所采用,可以遇见将会快速的普及开来。


       但是这也对我们的Web提出了更高的要求,因为我们需要适配更为复杂的UI方案。
       适配图像将会是响应式网络设计下一个需要解决的问题,因为我们针对不同分辨率的屏幕,例如iPhone 4s和iMac,最佳的方案是分别提供不同的图像。因为为低分辨率的屏幕提供高分辨率图像浪费带宽并影响下载速度,而为高分辨率的屏幕提供低分辨率图像又 非常影响体验。
       HTML5规范正在讨论分辨率图像的原生适配支持,其中一种比较可靠的方案如下:


双击代码全选
1
2
3
<img src="foo-lores.jpg"
     srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
     alt="decent alt text for foo.">
 

这种方式为img标签引入了一个新的srcset属性,通过2x和6.5x这种形式来告诉浏览器屏幕相对分辨率所采用的适配图像。请注意我们并没有使用媒介查询Media Query。
       另外与此类似的image set方案(作为CSS4的一部分)已经被添加到WebKit里,示例如下:


双击代码全选
1
2
3
4
selector {  
    background: image-set(url(foo-lowres.png) 1x,  
        url(foo-highres.png) 2x) center;  
}
 

rcset方案目前还在讨论和完善中,但是可以预见,我们将会有一个可靠的技术方案和标准。
       最后不要忘了,针对响应式图像,我们还有SVG这个强大而美妙的方案。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评
>